AngularJS data will not load through ng-route

Question

I am trying to get some data into a tab. My application uses ng-route, so here is my config code:

app.config(['$routeProvider', function($routeProvider){
$routeProvider
    .when('/EventList',{
        templateUrl:'html/eventsList.html',
        controller: 'eventListController',
        controllerAs:'eventListCrtl'
            })
    .otherwise({redirectTo:'/'});
}]);

I define here the controller and the name the controller will have inside my template with controllerAs

Here is my controller code:

app.controller('eventListController',['$scope', 'EventListHolder', function($scope, EventListHolder){
    var eventList = EventListHolder.get();
    window.alert(eventList.eventHead[1].numeroDossier);

}]);

It retrieves the data from a factory. The data is loaded into the controller since the window.alert works.

But for some reson it doesnt see to show up in my template, where I am trying to display the eventHead table in an HTML table. Here is the HTML:

<div align="center">
            <div class="container-fluid">
                <header>
                    <h1>Event List</h1> 
                </header>
            </div>

            <table class="row-spacer40 table-fill" >
                <thead>
                    <tr>

                        <th class="text-left">Numero</th>
                        <th class="text-left">Dossier/Client</th>
                        <th class="text-left">Lieu</th>


                    </tr>
                </thead>

                <tr ng-repeat="event in eventListCrtl.eventList.eventHead">
                    <td> <a href="/EventDetail">{{event.numeroDossier}}</a>
                    </td>
                    <td>{{event.designationDossier}}<br>{{event.nomClient}}
                    </td>
                    <td>{{event.adresse}}
                    </td>
                </tr>
            </table>
 </div>

Is there something specific to ng-route that I am overlooking ?

PS: If it helps, here is the JSON containing the data. (If you want a clear definition of my data structure.)

    {
"eventHead": [
    {
        "numeroDossier": 96549,
        "designationDossier": "TECHNIQUE MARIAGE ",
        "nomClient": "Olivia John & Donovan Hamlet",
        "adresse": "ABBAYE DES VAUX DE CERNAY"
    },
    {
        "numeroDossier": 98986,
        "designationDossier": "TOURNEE FDJ OLA",
        "nomClient": "LA FRANCAISE DES JEUX",
        "adresse": "MAGNUM"
    }
],
"success": true
  }

Answer 1

You should be using

this.eventList = EventListHolder.get();

instead of var eventList. ControllerAs syntax expects your view models to be binded to the 'this' object instead of $scope.