Angular module is not available when reference in separate files

I have a basic Angular application that tries to add controllers and directives under a single module. The module is declared in the top level javascript file called app.js and looks like the following:

(function(){
  var app = angular.module("FooModule", [
    'ngRoute',
    'ui.bootstrap'
  ]);

  // Code to setup config and routes here
})();

And in their own files, each controller or directive are created using code that looks like more or less like this ...

(function(){
  var app = angular.module('FooModule');

  app.controller('barCtlr'. ['$scope', function($scope) {
    // Controller Logic Here
  }]);
})();

When running, however, we are getting the error

Module 'FooModule' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Does anyone have any ideas why it can't find the FooModule?

NOTE: When we create a module for each individual controller or directive it works fine.