Error: $digest already in progress in angularjs when using alert

Question

I am just getting the json data from the services in the controller.

And I am using a callback function to print the success message when it got loaded. It is working fine but it is also throwing an error which I mentioned in the question

//JSON file
{
"pc":"name"
}

// angular services
var service = angular.module('Services', ['ngResource']).
factory('Widgets', function($resource){
    return $resource('/json/home.json', {}, {
        query: {method:'GET', params:{}, isArray:false}
    });
});

//controller
function editWidget($scope, Widgets) {
 $scope.data = Widgets.query(function(data) {   
    alert("Success Data Loaded ---> " + JSON.stringify(data.pc));
 });
}

Answer 1

alert, as well as confirm and prompt will pause the execution of code (blocks the thread), during which timeouts and intervals go all haywire if they should have been triggered during the pause. The $digest loop is made up of two smaller loops, which process $evalAsync queue and the $watch list. The $evalAsync queue is used to schedule work which needs to occur outside of current stack frame, but before the browser's view render. This is usually done with setTimeout(0). Your alert during this time causes the problem.

Answer 2

You can use $timeout to execute an alert after the digest cycle is done and this way avoids this error.

$timeout(function () {
    alert('Alert text');
 }); 

Also don't forget to inject $timeout into your directive