AngularJS Argument '***' is not a function, got undefined

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.

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.

Here's the code:

js/app.js

    angular.module('app', ['ionic', 'app.controllers'])

    .run(function($ionicPlatform) {
      ...
    })

   .config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

    .state('login', {
      url: '/login',
      templateUrl: 'templates/login.html',
      controller: 'LoginCtrl'
    })
    ...

js/controllers/LoginCtrl.js

    angular.module('app.controllers', [])
.controller('LoginCtrl', ['$scope', '$http', '$state'], function($scope, $http, $state) {});

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers/LoginCtrl.js"></script>
  </head>

  <body ng-app="app">
    <ion-nav-view></ion-nav-view>
  </body>
</html>

Tried many variations of the code above, to no avail.

Any help greatly appreciated...

Edit

I might have made some progress in finding out what the problem is (or just yet another symptom).

In my index.html 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

Controller 'ionNavBar', required by directive 'ionNavButtons', can't be found!


 <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers/RegisterCtrl.js"></script>
    <script src="js/controllers/LoginCtrl.js"></script>

the function of your controller has to be inside the dependencies array.

.controller('LoginCtrl', ['$scope', '$http', '$state', function($scope, $http, $state) {}]);

And i think you also have to inject $ionicPlatform in your run() and config function, like this

.run(["$ionicPlatform", function($ionicPlatform) {
      ...
    }])

.config(["dep1", function(dep1) {}]);