title: Cannot modularize AngularJS application
body: <p>I am new at AngularJS routing so this might sound like a noob question.</p>
  
  <p>I am working on an AngularJS app where there are a lot of controllers. To keep my controllers on seperate JS files, I have decided to create  separate modules for each controller.</p>
  
  <p>This is my main module in <strong>angularmodule.js</strong> file.</p>
  
  <pre><code>        var app = angular.module('adminpanel', ['ngRoute', 'CustomersModule', 'ngFileUpload', 'wysiwyg.module', 'ui.bootstrap']).config(function ($routeProvider) {
  
  
          $routeProvider.
                  when('/customers', {controller: CustomersCtrl, templateUrl: '/app/webroot/jakiamun/easybooks_admin/views/customers.html'}).
                  otherwise({redirectTo: '/dashboard'});
          ;
  
      });
  </code></pre>
  
  <p>This is the second module in <strong>customers.js</strong> file</p>
  
  <pre><code>angular.module('CustomersModule',[])
  .config(function ($routeProvider) {
  
  
          $routeProvider.
                  when('/customers', {controller: CustomersCtrl, templateUrl: '/app/webroot/jakiamun/easybooks_admin/views/customers.html'}).
                  otherwise({redirectTo: '/dashboard'});
          ;
  
      })
  .controller("CustomersCtrl" ,function($scope, $rootScope, $http) {
  
  
  }); 
  </code></pre>
  
  <p>In my <strong>html</strong> page, I am including the scripts like this</p>
  
  <pre><code>    &lt;script src="&lt;?php echo base_url(); ?&gt;/assets/js/angular.min.js"&gt;&lt;/script&gt;
        &lt;script src="&lt;?php echo base_url(); ?&gt;/assets/js/angular-route.min.js"&gt;&lt;/script&gt;
        &lt;script src="&lt;?php echo base_url(); ?&gt;/assets/js/ng-file-upload-shim.min.js"&gt;&lt;/script&gt; &lt;!-- for no html5 browsers support --&gt;
        &lt;script src="&lt;?php echo base_url(); ?&gt;/assets/js/ng-file-upload.min.js"&gt;&lt;/script&gt;  
          &lt;script src="&lt;?php echo base_url(); ?&gt;/assets/js/bootstrap-colorpicker-module.min.js"&gt;&lt;/script&gt;           
        &lt;script src="&lt;?php echo base_url(); ?&gt;/assets/js/angular-wysiwyg.min.js"&gt;&lt;/script&gt;
  
        &lt;script src="&lt;?php echo base_url(); ?&gt;/assets/js/ui-bootstrap-tpls-1.1.2.min.js"&gt;&lt;/script&gt;
  
        &lt;script src="&lt;?php echo base_url(); ?&gt;/assets/js/controllers/customers.js"&gt;&lt;/script&gt;
        &lt;script src="&lt;?php echo base_url(); ?&gt;/assets/js/angularmodule.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I have written <code>ng-app='adminpanel'</code> in the <em>body</em> tag of my html code.</p>
  
  <p>When I run my application, I get <code>$injector:modulerr</code>.</p>
  
  <p>Full error report</p>
  
  <pre><code>Failed to instantiate module adminpanel due to:
  ReferenceError: CustomersCtrl is not defined
  at http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angularmodule.js:9:53
  at Object.e [as invoke] (http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angular.min.js:40:477)
  at d (http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angular.min.js:39:148)
  at http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angular.min.js:39:272
  at n (http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angular.min.js:7:344)
  at g (http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angular.min.js:39:49)
  at fb (http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angular.min.js:42:360)
  at c (http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angular.min.js:19:421)
  at zc (http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angular.min.js:20:225)
  at be (http://localhost:8088/app/webroot/jakiamun/easybooks_admin//assets/js/angular.min.js:19:41
  </code></pre>