Angular ui-router resolve promise gives infinite digest loop

Question

I am trying to load data from my SQLite DB before loading my view by using resolve when defining my state.

Currently: ui-router state

.state("menu", {
    templateUrl: "templates/menu.html",
    controller: "MenuCtrl",
    url: "/menu",
    resolve:{
         simpleObj:  function(){
            return {value: 'simple!'};
         },
         promiseObj:  function($cordovaSQLite){
            query = "SELECT id FROM reports WHERE progress_status<2";
            $cordovaSQLite.execute(db, query, []).then(function(res) {                  
              var pendingList = [];
              for (var i = 0; i < res.rows.length; i++) {
                 pendingList.push(res.rows.item(i).id);
              }
              return pendingList;
            });
         }
      }

})

Controller

angular.module('starter.controllers').controller('MenuCtrl', function($scope, promiseObj) {

  console.log(JSON.stringify(promiseObj));

});

But this code gives me an infinite digest loop.

I normally have the DB execute code in a service (giving same result) but have moved inline for testing sake

Can anyone tell me how I might do this properly?

Update:

Error message as so:

02-04 12:07:03.520: D/CordovaLog(7773): file:///android_asset/www/lib/ionic/js/ionic.bundle.js: Line 19387 : Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

02-04 12:07:03.520: D/CordovaLog(7773): Watchers fired in the last 5 iterations: []

02-04 12:07:03.520: D/CordovaLog(7773): http://errors.angularjs.org/1.3.6/$rootScope/infdig?p0=10&p1=%5B%5D

Answer 1

This could happen if there's any error occurring in your app (in my case I had a dependency for angularfire. But I forgot include the firebase.js into my application) . Since you're using resolve, you won't see the actual error and you'll get this infinite digest error.

Based on my experience, I am guessing that there's some error in your app which is preventing the resolve being executed.

Answer 2

You should return a promise from your service & then you can access it inside controller. Resolve Promise in UI-Router DOCS

promiseObj: function($cordovaSQLite, $q) {
        var deferred = $q.defer();
        query = "SELECT id FROM reports WHERE progress_status<2";
        $cordovaSQLite.execute(db, query, []).then(function(res) {                  
          var pendingList = [];
          for (var i = 0; i < res.rows.length; i++) {
             pendingList.push(res.rows.item(i).id);
          }
          deferred.resolve(pendingList);
        });
        return deferred.promise;
    }

Controller

angular.module('starter.controllers').controller('MenuCtrl', function($scope, promiseObj) {
  //here the promise get available
  $scope.promiseObj = promiseObj;

  $scope.promiseObj.then(function(data){
     $scope.pendingList = data; //get pending here
  });

});

This could helpful to you. Thanks.