Angular / Controller loading a json file fails with an exception I can not understand

Question

sorry, maybe a stupid problem, but I am still a newbie with angular.

The code:

-- EDIT #2 -- ----- ----- ----- ----- ----- ----- -----

MyApp.controller('DataController', ['$http', function ($http) {

        var self = this;

        var objects = [];
        var loaded = false;

        var getObjects = function () {
            if(!loaded){
                setRawObjects();
            }
            return objects;
        };

        var setRawObjects = function(){
            $http.get('data/objects.json').success(function (response) {
                loaded=true;
            });
        }

        var openDetail = function () {
            console.log('test');
        }

        self.getObjects = getObjects;
        self.openDetail = openDetail;
    }]);

-- END OF EDIT #2 -- ----- ----- ----- ----- ----- -----

The Error:

Error: [$rootScope:infdig] http://errors.angularjs.org/1.5.5/$rootScope/infdig?p0=10&p1=%5B%5D
    at angular.js:38
    at n.$digest (angular.js:17111)
    at n.$apply (angular.js:17337)
    at angular.js:1749
    at Object.invoke (angular.js:4665)
    at c (angular.js:1747)
    at yc (angular.js:1767)
    at ee (angular.js:1652)
    at angular.js:30863
    at HTMLDocument.b (angular.js:3166)

angular.js:38Uncaught Error: [$rootScope:infdig] http://errors.angularjs.org/1.5.5/$rootScope/infdig?p0=10&p1=%5B%5D
    at angular.js:38
    at n.$digest (angular.js:17111)
    at n.$apply (angular.js:17337)
    at angular.js:1749
    at Object.invoke (angular.js:4665)
    at c (angular.js:1747)
    at yc (angular.js:1767)
    at ee (angular.js:1652)
    at angular.js:30863
    at HTMLDocument.b (angular.js:3166)

Exception is thrown twice. I connot imagine what it means, whats wrong? This line seems to curse the problem:

return $http.get('data/objects.json').success(function(response) {

The controller is beeing initiated in this way:

EspanioApp.controller('DataController', ['$http', function ($http) {...

Do you have any hint for me how I can fix this?

cu n00n

Answer 1

This is the error:

$rootScope:infdig (Infinite $digest Loop)

This error occurs when the application's model becomes unstable and each $digest cycle triggers a state change and subsequent $digest cycle. Angular detects this situation and prevents an infinite loop from causing the browser to become unresponsive.

Probably setRawObjects is bound in a not so proper way.

Also, I'm not really sure what you do with what setRawObjects is returning: I'd verify what it is returning - probably a promise, which should be handled asynchronously, so a direct html binding wouldn't handle it properly.

For example, if you print the return on console, you'll find out that the object is undefined, while the response is not, which means that the return is executed before the success callback:

setRawObjects = function(){
    return $http.get('data/objects.json').success(function(response) {
        console.log(response);
        objects = response.objects;
        loaded = true;
    });
}

var getObjects = function () {
    console.log(loaded);
    if(!loaded){
        setRawObjects();
    }
    console.log(objects);
    return objects;
};

So, instead of binding the function, bind the object directly:

MyApp.controller('DataController', ['$http', function ($http) {
    var self = this;
    self.objects = [];

    $http.get('data/objects.json').success(function (response) {
        console.log(response);
        self.objects = response;
    });
}]);

Angular will watch it's been updated and will update the view as well.