AngularJS initialize controller module

Question

I want to seperate my WebApp in different modules for directives, services, controllers etc. just like angular-seed. Somehow the controllers defined in controllers.js don't seem to work.

<ul class="menu" ng-controller="MenuController">
    <li>{{hello}}</li>
</ul>

In app.js I defined the global App module with it's submodules.

// Declare app level module which depends on filters, and services
angular.module('myApp', [
    'myApp.filters',
    'myApp.services',
    'myApp.directives',
    'myApp.controllers'
]);

And in controllers.js I tried to define a controller, that does not load. When the page get rendered I just see {{hello}} .

angular.module('myApp.controllers', []).
  controller('MenuController', function($scope) {
     $scope.hello = "world"; 
  });

How do I attach the controllers to their template counterparts?

Answer 1

The problem is because the other modules aren't defined. Modifying the myApp module like below works:

angular.module('myApp', [

    'myApp.controllers'
]);

http://jsbin.com/osOQOYag/2/edit?html,js,output

Answer 2

It seems like angular-seed has the following order of scripts in their /app/index.html :

<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>

As @KhanhTO pointed out in the comments, app.js should be called last.