Angular Js linking a controller to a route doesn' work

Question

I watching an Angular course on codeschool and it say that there are two way to link a controller to a route The first one is declaring the controller inside the route like this:

angular.module('NotesApp')
    .config(function($routeProvider){
        $routeProvider.when('/notes', {
            templateUrl:' templates/pages/notes/index.html',
            controller: function(){.....}           
        })

the second way is to create a new file and then, over there, declare all the methods associate to that controller. After this have been done, we have to associate the controller to the route, like this.

angular.module('NotesApp')
    .config(function($routeProvider){
        $routeProvider.when('/notes', {
            templateUrl:' templates/pages/notes/index.html',
            controller:'NotesIndexController', 
            controllerAs:'indexController'          
        })

This controller, I've made, import some data using an ajax call from a json file but it doesn't work well. I have to use this controller inside an HTML file

this is the controller

angular.module('NotesApp').controller('NotesIndexController',['$http', function($http){
    var controller = this;

    controller.notes = [];

    $http.get('notes.json').success(function(data){                     
        controller.notes = data;
    })
}]);

This is the HTML code

<a ng-repeat="note in indexController.notes" ng-href="#/notes/{{note.id}}">
                <div class="col-md-3 fixHeight" >
                    <h4>Id: {{note.id}}<h4>
                    <h4>Title: {{note.title}}</h4>
                    <h4>Description: {{note.description}}</h4>
                </div>
            </a>
        </div>

the html should import all note stored inside the controller.notes array and display all it but it seems like the html doesn't recognize the controller and does't import anything.

The code works just if I declare inside the HTMl the controller I have to use like this:

<div ng-controller="NotesIndexController as indexController">       
            <a ng-repeat="note in indexController.notes" ng-href="#/notes/{{note.id}}">
                <div class="col-md-3 fixHeight" >
                    <h4>Id: {{note.id}}<h4>
                    <h4>Title: {{note.title}}</h4>
                    <h4>Description: {{note.description}}</h4>
                </div>
            </a>
        </div>

My question is. If I declare the controller inside my route why I should declare it also in my HTML?

Answer 1

Ok thanks everybody, I figured out what was the problem. This is the complete route.js file

angular.module('NotesApp',["ngRoute"])
.config(['$routeProvider',function($routeProvider){
    $routeProvider.when('/notes', {
        templateUrl:'templates/pages/notes/index.html',
        controller:'NotesIndexController', // I have to declare the controller inside the template to make it work
        controllerAs:'indexController'          
    })  
    .when('/users',{
        templateUrl: 'templates/pages/users/index.html'
    })
    .when('/',{
        templateUrl: 'templates/pages/notes/index.html'
    })
    .when('/notes/:id', {
        templateUrl:'templates/pages/notes/show.html',
        controller:'NoteShowController',
        controllerAs:'showController'
    })
    .otherwise({redirectTo:'/'});
}]);

The problem was the line:

    .when('/',{
    templateUrl: 'templates/pages/notes/index.html'
})

instead, to load my controller should have been

        .when('/',{
    redirectTo: '/notes'
})

Answer 2

Please find this working plunk with your code

angular.module('NotesApp',  ["ngRoute"])
.config(function($routeProvider){
    $routeProvider.when('/', {
        templateUrl:'main.html',
        controller:'NotesIndexController', 
        controllerAs:'indexController'          
    })
})
angular.module('NotesApp').controller('NotesIndexController',['$http', function($http){
   var controller = this;

   controller.notes = [];

  $http.get('data.json').success(function(data){      
    console.log(data)
    controller.notes = data;
})

}]);