Angularjs JavaScript runtime error: 10 $digest() iterations reached. Aborting

Question

I am trying to use bootstrap 2.3.x with angularjs to create a menu bar for my webpage as shown below.

<div class="container" >
    <div class="navbar">
        <div class="nav-collapse collapse" >
            <ul class="nav pull-right">
                <li ng-repeat="menu in headerMenus" class={{menu.active}}>
                    <a href="#" ng-click="MenuClicked(menu)">{{menu.name}}</a>
                </li>
            </ul>
        </div>
    </div>
</div>

my controller is defined as below

var myApp = angular.module('myApp', [ ]);

myApp.controller('ctrl', function ctrl($scope) {

  $scope.headerMenus = [
    { 'name': 'Home ',
        'link': 'index.html'
    },
    { 'name': 'Our Services',
        'link': 'services.html',
        'active': 'active'
    },
    { 'name': 'About Us',
        'link': 'about_us.html'
    },
    { 'name': 'Portfolio',
        'link': 'portfolio.html'
    },
    { 'name': 'Support',
        'link': 'contact.html'
    }
  ];

  $scope.MenuClicked = function(menu){
    alert('Clicked:' + menu.link);    
  }
});

now after I click on the menu a few times, angular is throwing the following error:

JavaScript runtime error: 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [["fn: function $locationWatch() {\n var oldUrl = $browser.url();\n var currentReplace = $location.$$replace;\n\n if (!changeCounter || oldUrl != $location.absUrl()) {\n changeCounter++;\n
$rootScope.$evalAsync(function() {\n if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).\n defaultPrevented) {\n
$location.$$parse(oldUrl);\n } else {\n
$browser.url($location.absUrl(), currentReplace);\n
afterLocationChange(oldUrl);\n }\n });\n }\n
$location.$$replace = false;\n\n return changeCounter;\n }; newVal: 8; oldVal: 7"],["fn: function $locationWatch() {\n var oldUrl = $browser.url();\n var currentReplace = $location.$$replace;\n\n if (!changeCounter || oldUrl != $location.absUrl()) {\n changeCounter++;\n
$rootScope.$evalAsync(function() {\n if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).\n defaultPrevented) {\n
$location.$$parse(oldUrl);\n } else {\n
$browser.url($location.absUrl(), currentReplace);\n
afterLocationChange(oldUrl);\n }\n });\n }\n
$location.$$replace = false;\n\n return changeCounter;\n }; newVal: 9; oldVal: 8"],["fn: function $locationWatch() {\n var oldUrl = $browser.url();\n var currentReplace = $location.$$replace;\n\n if (!changeCounter || oldUrl != $location.absUrl()) {\n changeCounter++;\n
$rootScope.$evalAsync(function() {\n if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).\n defaultPrevented) {\n
$location.$$parse(oldUrl);\n } else {\n
$browser.url($location.absUrl(), currentReplace);\n
afterLocationChange(oldUrl);\n }\n });\n }\n
$location.$$replace = false;\n\n return changeCounter;\n }; newVal: 10; oldVal: 9"],["fn: function $locationWatch() {\n var oldUrl = $browser.url();\n var currentReplace = $location.$$replace;\n\n if (!changeCounter || oldUrl != $location.absUrl()) {\n changeCounter++;\n
$rootScope.$evalAsync(function() {\n if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).\n defaultPrevented) {\n
$location.$$parse(oldUrl);\n } else {\n
$browser.url($location.absUrl(), currentReplace);\n
afterLocationChange(oldUrl);\n }\n });\n }\n
$location.$$replace = false;\n\n return changeCounter;\n }; newVal: 11; oldVal: 10"],["fn: function $locationWatch() {\n var oldUrl = $browser.url();\n var currentReplace = $location.$$replace;\n\n if (!changeCounter || oldUrl != $location.absUrl()) {\n changeCounter++;\n
$rootScope.$evalAsync(function() {\n if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).\n defaultPrevented) {\n
$location.$$parse(oldUrl);\n } else {\n
$browser.url($location.absUrl(), currentReplace);\n
afterLocationChange(oldUrl);\n }\n });\n }\n
$location.$$replace = false;\n\n return changeCounter;\n }; newVal: 12; oldVal: 11"]]

if i comment out the ng-click on the menu I have no issues. Can someone help me figure out what I am doing wrong here?

EDIT

This issue goes away when I comment out the href="#" or the ng-click, but both together, it fails.

Manny D Manny D · Accepted Answer · 2013-11-12T17:47:25

Your controller definition looks a bit off. Try using this:

myApp.controller('ctrl', function ($scope) {
   // ...
});

Angularjs JavaScript runtime error: 10 $digest() iterations reached. Aborting

1 Answers