Ionic / Cordova: Module cant be found

I defined the following app.js:

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

.run(function ($ionicPlatform) {
    $ionicPlatform.ready(function () {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }

        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})

.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('index', {
        url: '/',
        templateUrl: 'templates/home.html'
    }).state('prints', {
        url: '/prints',
        templateUrl: 'templates/photo_prints.html'
    }).state('box', {
        url: '/box',
        templateUrl: 'templates/photo_box.html'
    }).state('book', {
        url: '/book',
        templateUrl: 'templates/photo_book.html'
    }).state('framed', {
        url: '/framed',
        templateUrl: 'templates/photo_framed.html'
    });

    $urlRouterProvider.otherwise("/");
});

and this controllers.js:

angular.module('myApp.controllers').controller('HomeController', ['$scope', 'productsFactory', homeController]);

function homeController($scope, productsFactory) {
    $scope.products = [];

    init();

    function init() {
        $scope.products = productsFactory.getProducts();
    }
}

I also added both scripts in my index.html:

<head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

    <!-- Ionic -->
    <link rel="stylesheet" type="text/css" href="lib/ionic/css/ionic.css">
    <script type="text/javascript" src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- myApp -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/factory.js"></script>
    <script type="text/javascript" src="js/controllers.js"></script>
</head>

But when i try to run this i get the error:

[$injector:nomod] Module 'myApp.controllers' 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.

My Controller cant be found... why? I implemented it exaclty like the standard template from cordova or ionic provides.

You should define your controller's module like this:

angular.module('myApp.controllers', [])

so ...

angular.module('myApp.controllers', [])
       .controller('HomeController', homeController);

homeController.$inject = ['$scope', 'productsFactory'];

function homeController($scope, productsFactory) {
         $scope.products = [];

     init();

     function init() {
          $scope.products = productsFactory.getProducts();
     }
}

This is the reference.

UPDATE:

When you create a new Ionic project - let's say sidemenu - you will have one file controllers.js where all your controllers are defined.

That's the place where you can defined every single controller your app is going to use:

angular.module('myApp.controllers', [])

.controller('sample1Controller', function($scope) {

})

.controller('sample2Controller', function($scope) {

})

.controller('sample3Controller', function($scope) {

});

Here, in this sample, I've defined 3 controllers: sample1Controller, sample2Controller, sample3Controller.

This is not the best way to do things, though. Best practice is to have one js file for each controller. Let's say it's good enough for now.

Your main app myApp is defined here:

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

and I guess it will be attached to some elements in your HTML:

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

you're injecting in your app a few modules: ionic and your myApp.controllers.

myApp.controllers is a custom module: the container for your controllers.

You have to define it somewhere. That's the way you would do that:

 angular.module('myApp.controllers', [])

If you want to separate your controllers in each file you can do something like this. In one file you can put your controller module definition (app.controllers.js):

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

and in eache file you can have your own controller:

home.js

angular.module('app.controllers')
   .controller('homeController', function($scope) {

});

contacts.js

angular.module('app.controllers')
    .controller('contactsController', function($scope) {

});

and, of course, you have to include each controller's js file in your index.html.

You can have a look at this plunker.

You should only add this line on the top of your controllers.js:

angular.module('myApp.controllers', []);