SCRIPT5022: 10 $digest() iterations reached. Abort

Problem:

I am trying to load an Angular JS app in a bootstrap modal pane, and it is displaying strange behaviour on Internet Explorer (We have tested it on IE9 and 8).

we found that we were getting following errors :

** 'JSON' undefined ** object Errorundefined

SCRIPT5022: 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: function $locationWatch() {
  var oldUrl = $browser.url();
  var currentReplace = $location.$$replace;

  if (!changeCounter || oldUrl != $location.absUrl()) {
    changeCounter++;
    $rootScope.$evalAsync(function() {
      if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).
          defaultPrevented) {
        $location.$$parse(oldUrl);
      } else {
        $browser.url($location.absUrl(), currentReplace);
        afterLocationChange(oldUrl);
      }
    });
  }
  $location.$$replace = false;

  return changeCounter;
}; newVal: 7; oldVal: 6"],["fn: function $locationWatch() {
  var oldUrl = $browser.url();
  var currentReplace = $location.$$replace;

  if (!changeCounter || oldUrl != $location.absUrl()) {
    changeCounter++;
    $rootScope.$evalAsync(function() {
      if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).
          defaultPrevented) {
        $location.$$parse(oldUrl);
      } else {
        $browser.url($location.absUrl(), currentReplace);
        afterLocationChange(oldUrl);
      }
    });
  }
  $location.$$replace = false;

  return changeCounter;
}; newVal: 8; oldVal: 7"],["fn: function $locationWatch() {
  var oldUrl = $browser.url();
  var currentReplace = $location.$$replace;

  if (!changeCounter || oldUrl != $location.absUrl()) {
    changeCounter++;
    $rootScope.$evalAsync(function() {
      if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).
          defaultPrevented) {
        $location.$$parse(oldUrl);
      } else {
        $browser.url($location.absUrl(), currentReplace);
        afterLocationChange(oldUrl);
      }
    });
  }
  $location.$$replace = false;

  return changeCounter;
}; newVal: 9; oldVal: 8"],["fn: function $locationWatch() {
  var oldUrl = $browser.url();
  var currentReplace = $location.$$replace;

  if (!changeCounter || oldUrl != $location.absUrl()) {
    changeCounter++;
    $rootScope.$evalAsync(function() {
      if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).
          defaultPrevented) {
        $location.$$parse(oldUrl);
      } else {
        $browser.url($location.absUrl(), currentReplace);
        afterLocationChange(oldUrl);
      }
    });
  }
  $location.$$replace = false;

  return changeCounter;
}; newVal: 10; oldVal: 9"],["fn: function $locationWatch() {
  var oldUrl = $browser.url();
  var currentReplace = $location.$$replace;

  if (!changeCounter || oldUrl != $location.absUrl()) {
    changeCounter++;
    $rootScope.$evalAsync(function() {
      if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).
          defaultPrevented) {
        $location.$$parse(oldUrl);
      } else {
        $browser.url($location.absUrl(), currentReplace);
        afterLocationChange(oldUrl);
      }
    });
  }
  $location.$$replace = false;

  return changeCounter;
}; newVal: 11; oldVal: 10"]]

and many other errors

So, we found that there are 3 problem on IE: 1) JSON was not available 2) Problem with Bootstraping application 3) Problem Rendering view

after going through Angular JS documentation and lots of threads from StackOverflow, such as :

http://docs.angularjs.org/guide/ie
'JSON' is undefined error in IE only
JSON Parse Error on Internet Explorer
Running AngularJS App on Internet Explorer 7
http://docs.angularjs.org/guide/directive

We found that there are few common across all threads (also mentioned in AngulaJS IE guide): * Include JSON2/JSON3 pollyfills for IE * use ie-shiv, and pre-declare custom tags (we are using custom typeahead directive, with restrict: 'E', replace: true) * use other IE specific instructions

So, I made following chagnes :

var markup = '<div id="ng-app" class="ng-app:myapp" ng-app="myapp" xmlns:ng="http://angularjs.org"><div ng-controller="MyAppAppCtrl"><div ng-view></div></div></div>';
    jQuery('#works-modal').html(markup);
    angular.bootstrap(jQuery('#ng-app'), ['myapp']);   
    jQuery('#works-modal').modal('show');

After implementing above changes, I was still getting :

Error: 10 $digest() iterations reached. Aborting!

https://github.com/angular/angular.js/issues/1417

While trying to render view, and application was redirecting to home page. so I tried making changes suggested in :

https://github.com/RobbinHabermehl/angular.js/commit/c801f91a25b9be6f5b1163c012e63c84cc6a1359

Now, I am no longer getting the error, when I click on link to display the Modal dialog, it displays the pop-up for a sec, then redirects to home page.

If I set :

$locationProvider.html5Mode(false)
  .hashPrefix('!');

It works fine. Anyone facing similar issue? Any help is appreciated.

Update I've also reported this issue on Angular JS Github bug list, they informed me that they have fixed this issue on 1.2 version:

https://github.com/angular/angular.js/issues/3397

I'll check and update this thread if that resolves my problem.

Update

I updated my version of Angular, and this seems to resolve this "10 $digest() iterations reached. Aborting!", however, it still seems to be triggering URL change, leading it to redirect to home page.

Let me explain my scenario here, so that others can suggest me if this is exactly related to this or not:

I have a page say : http://example.com/users/myCollection.html On this page, I am loading my AngularJS App inside a Bootstrap Modal dialog, when user clicks some link, on page. Angular route of app loaded in Modal is : /mywork/find

After upping the version of Angular, now, Modal seems to loading the app for a second, then, redirect happens, and it goes to home page.

FYI, I am also using jQuery on the page that is used to launch the Angular App, is there any chance of conflict due to this?

Thanks, Ravish

I've already summerize my problems above, and steps I took to fix those problem, Let me summerize again, then I'll summerize issue with "10 $digest() iterations reached. Aborting!":

Step 1) Issue with bootstrapping application on IE

Issue with bootstrapping application on IE. We are loading our Angular App inside Bootstrap modal dialog, and manually bootstrapping the Angular App. Since we were getting error rendering view, we suspected it be releated to either : we missed something that our "beloved" IE does not like, or, it simply does not like my custom directive, or Hogan Engine that we were using with our custom directive. I resolved them by reading specific Angular JS documentation and one Stackoverflow thread.

I strongly suggest following everyone, working, or going to work on Angular JS, that you suppose to use on IE, please read following:

http://docs.angularjs.org/guide/ie
http://docs.angularjs.org/guide/directive
Running AngularJS App on Internet Explorer 7

Step 2)

After Step 1, we were able to get the App running with html5mode(false), but, html5mode(true), was still a problem, for us. After some debugging, and adding couple of console.log, we realized that even with html5mode(false), application was bootstrapped twice. Twice?, but, we were manually bootstrapping application. Following is my template for bootstrapping Angular app:

var markup = '<div id="ng-app" class="ng-app:myapp" ng-app="myapp" xmlns:ng="http://angularjs.org"><div ng-controller="MyAppAppCtrl"><div ng-view></div></div></div>';
jQuery('#works-modal').html(markup);
angular.bootstrap(jQuery('#ng-app'), ['myapp']);   
jQuery('#works-modal').modal('show');

We modified above template something like :

var markup = '<div id="ng-app" ng-app="myapp" xmlns:ng="http://angularjs.org"><div ng-controller="MyAppAppCtrl"><div ng-view></div></div></div>';
jQuery('#works-modal').html(markup);
angular.bootstrap(jQuery('#ng-app'), ['myapp']);   
jQuery('#works-modal').modal('show');

added onclick="return false;" href="#" on the link used to launch the app.

Note : If there are hyperlinks in your App, make sure you handle them properly, and they are doing what you want them to do, because, "href", can cause location change, which your application might not like.

Step 3) Updated version of Angular JS

There were couple of possible fix mentioned in some Angular JS Github bug page:

https://github.com/angular/angular.js/issues/1417
https://github.com/angular/angular.js/issues/3397

one such fix was mentioned in following Gist : https://github.com/RobbinHabermehl/angular.js/commit/c801f91a25b9be6f5b1163c012e63c84cc6a1359

However, I was not comfortable with idea of patching core libraries, updating core libraries have their own downside, that is you might have re-factor part of code your application uses from library is deprecated, but, if there are critical bug fixes (like fix for the issue we were facing) and improvement, that's always a go. so, we will move to latest stable build of Angular JS.

Now, we are no longer getting the error, and able to Bootstrap our app on all browsers (yeah, even on OMG IE7 ;) ).

All is well, right? Well, after upping the version of Angular, now, Modal seems to loading the app for a second, then, redirect happens, and it goes to home page.

However, Angular JS $location service guide ($location service configuration and Hashbang and HTML5 Modes), explains this, here : http://code.angularjs.org/1.2.14/docs/guide/dev_guide.services.$location

HashBang (or HTML5 fallback mode) requires server side configuration, which is kind of server side "hack". And it's really upto you, if you 'really' want something like this or not.

So, all well now :)

Hope this to be of some use to anyone struggling with this or somethign similar.

Again Angular JS rocks ;)