ng-repeat not binding to list item

Question

I'm working on an Ionic 1 project where I am retrieving data from a Backendless server. The data is being retrieved, but is not being displayed, when using ng-repeat. Here's my code:

HTML code:

<ion-view view-title="Hotels" ng-controller="AgHotelCtrl">
<ion-content>
<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
</ion-refresher>
<ul class="list">
    <li ng-repeat="r in res" class="item">
      <h2>{{r.name}}</h2>
      <p>{{r.locality}}</p>
    </li>
</ul>
</ion-content>
</ion-view>

JS code:

.controller('AgHotelCtrl', function($scope, $state) {
    var init = function() {
        console.log("hola");
        var user = $state.params.user;
        $scope.res=[];
        var whereClause = "agent_email = '" + user.email + "'";
        var queryBuilder = Backendless.DataQueryBuilder.create().setWhereClause( whereClause );
        Backendless.Data.of("Hotels").find( queryBuilder )
            .then(function(foundHotels) {
                $scope.res = foundHotels;
                console.log($scope.res);
            })
            .catch(function(error) {
                console.log("error" + error.message);
            })
    }
    init();
    $scope.doRefresh = function () {
        init();
        $scope.$broadcast ('scroll.refreshComplete');
    }
})

The data is being shown on the console, but is not appearing on the HTML page. After refreshing, it appears. How do I make it appear on the first load as well?

Answer 1

Looks like Backendless is not an angular service, so I'm guessing it is retrieving data through normal http requests, and not using the $http service. This means that the retrieval is occuring outside of angular's digest cycle so it will not update the views accordingly.

You can fix it by wrapping your assigning of the variables in a $scope.apply(); block after the retrieval:

Backendless.Data.of("Hotels").find( queryBuilder )
    .then(function(foundHotels) {
        $scope.$apply(function() {
            $scope.res = foundHotels;
        });
        console.log($scope.res);
    })