Angular JS: IE Error: 10 $digest() iterations reached. Aborting

Question

I'm new to Angular and I'm stuck with a issue relating IE.

Here is the IE Error that I'm getting.

Webpage error details  User Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0) Timestamp: Thu, 13 Dec 2012 04:00:46 UTC   Message: 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [["fn: function $locationWatch() {\n      var oldUrl = $browser.url();\n\n      if (!changeCounter || oldUrl != $location.absUrl()) {\n\tchangeCounter++;\n\t$rootScope.$evalAsync(function() {\n\t  if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).\n\t      defaultPrevented) {\n\t    $location.$$parse(oldUrl);\n\t  } else {\n\t    $browser.url($location.absUrl(), $location.$$replace);\n\t    $location.$$replace = false;\n\t    afterLocationChange(oldUrl);\n\t  }\n\t});\n      }\n\n      return changeCounter;\n    }; newVal: 7; oldVal: 6"],["fn: function $locationWatch() {\n      var oldUrl = $browser.url();\n\n      if (!changeCounter || oldUrl != $location.absUrl()) {\n\tchangeCounter++;\n\t$rootScope.$evalAsync(function() {\n\t  if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).\n\t      defaultPrevented) {\n\t    $location.$$parse(oldUrl);\n\t  } else {\n\t    $browser.url($location.absUrl(), $location.$$replace);\n\t    $location.$$replace = false;\n\t    afterLocationChange(oldUrl);\n\t  }\n\t});\n      }\n\n      return changeCounter;\n    }; newVal: 8; oldVal: 7"],["fn: function $locationWatch() {\n      var oldUrl = $browser.url();\n\n      if (!changeCounter || oldUrl != $location.absUrl()) {\n\tchangeCounter++;\n\t$rootScope.$evalAsync(function() {\n\t  if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).\n\t      defaultPrevented) {\n\t    $location.$$parse(oldUrl);\n\t  } else {\n\t    $browser.url($location.absUrl(), $location.$$replace);\n\t    $location.$$replace = false;\n\t    afterLocationChange(oldUrl);\n\t  }\n\t});\n      }\n\n      return changeCounter;\n    }; newVal: 9; oldVal: 8"],["fn: function $locationWatch() {\n      var oldUrl = $browser.url();\n\n      if (!changeCounter || oldUrl != $location.absUrl()) {\n\tchangeCounter++;\n\t$rootScope.$evalAsync(function() {\n\t  if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).\n\t      defaultPrevented) {\n\t    $location.$$parse(oldUrl);\n\t  } else {\n\t    $browser.url($location.absUrl(), $location.$$replace);\n\t    $location.$$replace = false;\n\t    afterLocationChange(oldUrl);\n\t  }\n\t});\n      }\n\n      return changeCounter;\n    }; newVal: 10; oldVal: 9"],["fn: function $locationWatch() {\n      var oldUrl = $browser.url();\n\n      if (!changeCounter || oldUrl != $location.absUrl()) {\n\tchangeCounter++;\n\t$rootScope.$evalAsync(function() {\n\t  if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).\n\t      defaultPrevented) {\n\t    $location.$$parse(oldUrl);\n\t  } else {\n\t    $browser.url($location.absUrl(), $location.$$replace);\n\t    $location.$$replace = false;\n\t    afterLocationChange(oldUrl);\n\t  }\n\t});\n      }\n\n      return changeCounter;\n    }; newVal: 11; oldVal: 10"]] Line: 7859 Char: 6 Code: 0 URI: http://localhost:8080/__assets__/lib/angular/angular.js 

This is not happening in any other browser but IE 8 and IE 9.

I have a watch looking at a content filtering object which includes a location filter.

My question with this is why doesn't it happen on any other browser but IE and what should I do to get rid of this. Thanks in advance.

Answer 1

Tiago Roldão is definitely right. I had exact the same issue. After debug, I realized in my code I have

location.hash = "#/app/" + id; 

which causes the infinitely loop issue. After some research, I found this

$location.path("/apps/" + id); 

which solves my issue perfectly.