title: AngularJS Argument '***' is not a function, got undefined
body: <p>I am using the Ionic framework to build an hybrid app with AngularJS and Cordova. Completely new to both AngularJS and JavaScript, this has not been a sweet ride. </p>
  
  <p>Everything was working fine until I decided to re-organize the structure of my app with 1 file per controller/service. So I'm pretty sure that the problem is coming from there, I just can't find how to fix it.</p>
  
  <p>Here's the code:</p>
  
  <p><em>js/app.js</em></p>
  
  <pre><code>    angular.module('app', ['ionic', 'app.controllers'])
  
      .run(function($ionicPlatform) {
        ...
      })
  
     .config(function($stateProvider, $urlRouterProvider) {
  
    $stateProvider
  
      .state('login', {
        url: '/login',
        templateUrl: 'templates/login.html',
        controller: 'LoginCtrl'
      })
      ...
  </code></pre>
  
  <p><em>js/controllers/LoginCtrl.js</em></p>
  
  <pre><code>    angular.module('app.controllers', [])
  .controller('LoginCtrl', ['$scope', '$http', '$state'], function($scope, $http, $state) {});
  </code></pre>
  
  <p><em>index.html</em></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;link href="lib/ionic/css/ionic.css" rel="stylesheet"&gt;
      &lt;link href="css/style.css" rel="stylesheet"&gt;
  
      &lt;script src="lib/ionic/js/ionic.bundle.js"&gt;&lt;/script&gt;
      &lt;script src="cordova.js"&gt;&lt;/script&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
      &lt;script src="js/controllers/LoginCtrl.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-app="app"&gt;
      &lt;ion-nav-view&gt;&lt;/ion-nav-view&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Tried many variations of the code above, to no avail.</p>
  
  <p>Any help greatly appreciated...</p>
  
  <p><strong>Edit</strong></p>
  
  <p>I might have made some progress in finding out what the problem is (or just yet another symptom).</p>
  
  <p>In my <code>index.html</code> file, if I switch the order of declaration of the controllers, the one declared right after app.js always gets ignored. This is the error I get when I put them in the order below </p>
  
  <pre><code>Controller 'ionNavBar', required by directive 'ionNavButtons', can't be found!
  
  
   &lt;script src="lib/ionic/js/ionic.bundle.js"&gt;&lt;/script&gt;
      &lt;script src="cordova.js"&gt;&lt;/script&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
      &lt;script src="js/controllers/RegisterCtrl.js"&gt;&lt;/script&gt;
      &lt;script src="js/controllers/LoginCtrl.js"&gt;&lt;/script&gt;
  </code></pre>