First JayData query with Angular and Odata

Question

I am trying to display data from an Odata Web Api controller using JayData and Angular. I have managed to get to the stage where the data is returned in Firebug, but I can't get the data into my controller or view.

Here is my app.js :

var app = angular.module("app", ["localization", "ngResource", "ngRoute", "jaydata"]).
    config(function ($routeProvider, $locationProvider) {
        $routeProvider.
            when('/Admin/Stages/List', { templateUrl: '/Content/Templates/Stages.html' }).
            otherwise({ redirectTo: 'Admin/Teams/List', templateUrl: '/Content/Templates/Teams.html' });
        $locationProvider.html5Mode(true); //will use html5 mode rather than hashbang where available
    });

var StageListController = function ($scope, $data) {

    $scope.stages = [];

    $data.initService('http://lj.cloudapp.net/odata')
    .then(function (lj) {
        $scope.lj = lj;
        $scope.stages = lj.Stages.toLiveArray();
    });
};

This is my template :

<table class="table table-striped table-condensed table-hover">
<thead>
    <th>
        Stage Id
    </th>
    <th>
        Stage Name
    </th>
</thead>
<tbody>
    <tr ng-repeat="stage in stages | filter:search:StageName | orderBy:'StageId'" id="stage_{{stage.id}}">
        <td>{{stage.StageId}}</td>
        <td>{{stage.StageName}}</td>
    </tr>
</tbody>

And this is my view :

    <div data-ng-app="app">
    <div class="container" ng-controller="StageListController">
            <div ng-view></div>
        </div>
    </div>

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<script src="@Url.Content("~/Scripts/datajs-1.1.1.min.js")"></script>
<script src="@Url.Content("~/Scripts/angular.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/angular-resource.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/angular-route.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/localize.js")" type="text/javascript"></script>
<script src="http://include.jaydata.org/jaydata.js"></script>
<script src="http://include.jaydata.org/jaydatamodules/angular.js"></script>
<script src="@Url.Content("~/Scripts/angular/app.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/angular/lj.js")" type="text/javascript"></script>

The code reaches .then in the Controller, but nothing is populated in $scope.stages. Any help would be really appreciated.

EDIT :

I have changed the following above to log errors :

var StageListController = function ($scope, $data) {

$scope.stages = [];

$data.initService('http://lj.cloudapp.net/odata')
.then(function (context) {
    alert(context);
    $scope.context = context;
    $scope.stages = context.Stages.toArray().then(function (stage) {
        console.log("stage[10] is:");
        console.log(stage[10]);
        stage.forEach(function (p) {
            console.log(stage.StageName);
        });
    })

      .fail(function (r) {
          console.log(r);
      });
});

};

EDIT 2:

Switching from datajs 1.1.1 to 1.0.3 seems to fix this issue

Answer 1

Switching from datajs 1.1.1 to 1.0.3 seems to fix this issue