RangeError: Maximum call stack size exceeded

20
votes

I guess this means there is a circular reference somehwere but for the life of me I can't guess how to fix it.

Anyone have any ideas?

http://plnkr.co/edit/aNcBcU?p=preview

Check the debug console in Chrome (for example) and you'll see the error. The offending line is 

 scope.map = map;

scope.map is being "$watched" on the controller via 

$scope.$watch("options.map", function (map) { ... }, true);
3
angularjs

3 Answers

18
votes

It's because you're comparing for object for equality rather than for reference. Change your $watch statement to this:

$scope.$watch("options.map", function (map) {
    if (map === undefined) {
        alert("map has no value");
    } else {
        alert("map is defined");
    }
});
11
votes

I also had this issue and found out that the objects I was comparing had circular references. (Tried JSON.stringify() which threw 'TypeError: Converting circular structure to JSON').

When I edited my object so that it didn't have circular structure, I fixed this problem and compared objects not by reference but by properties value which was what I needed.

6
votes

The third parameter of $watch function tells how to compare the watched object. False to reference comparing only. True to recursive equality comparing, if an object contains circular references, then over maximum stack size. For example: 

var a = {ref:b};
var b = {ref:a};
$scope.$watch('b', function(){
  //code here will never called, because stack overflow when comparing the object b. 
}, true)