AngularJS binding not occurring on page until a user action

Question

I've got my first angular app which displays some data from a list via ng-repeat.

The controller for the view sets a few variables to scope - some directly in the function and another from an API call.

The data from the in function load is showing up in that ng-repeat. The data from the service call doesn't show up (debugging shows the function is being called and data returned and set in scope).

I've got a filter on and if I type anything in it then the data shows up. Or when I click to another view the data flashes onto the page briefly before it loads the new view.

Here is some view code (the items works, venues does not):

<div ng-repeat="item in items">
{{ item.firstName }}
</div>
<div ng-repeat="venue in venues">
{{ venue.details }}
</div>

And here is the controller (data is coming back from the call):

$scope.items = [
{ "firstName": "John", "lastName": "Doe" },
{ "firstName": "Anna", "lastName": "Smith" },
{ "firstName": "Peter", "lastName": "Jones" }
];

var client = new WindowsAzure.MobileServiceClient("url", "key");

var query = client.getTable("venues").read().done(function (results) {
            $scope.venues = results;
        }, function (err) {
            alert("Error: " + err);
        });

I'm wondering if maybe the binding is happening before the data is returned from the API?

I added a div and this line into the function and it is printing the results to the page no issues:

document.getElementById("venueslist").innerHTML = JSON.stringify(results);

Thank you for reading.

Answer 1

Looking at your code client.getTable doesn't look like it is using any of angularJs $http or $timeout service. So you will have to wrap the assignment in scope.$apply() so that the $digest cycle is run and the bindings are updated in the view.

    var query = client.getTable("venues").read().done(function (results) {
        $scope.$apply(function () {
           $scope.venues = results;
        });
    }, function (err) {
        alert("Error: " + err);
    });

Side note: why are you doing JSON.parse(JSON.stringify(results)), you can directly use results if it is a json object.