current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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.

share|improve this question
    
Check out: stackoverflow.com/questions/13853844/… –  KayakDave Nov 12 '13 at 21:26

1 Answer 1

up vote 0 down vote

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

myApp.controller('ctrl', function ($scope) {
   // ...
});
share|improve this answer
    
you are correct, it was the typo in my post. issue is somehow related to the href="#" and ng-click being used together. –  Kiran Nov 12 '13 at 18:19
    
Ah, I see. Do you need the extra href? –  Manny D Nov 12 '13 at 19:02

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.