RangeError: Maximum call stack size exceeded

Question

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);

Answer 1

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");
    }
});

Answer 2

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.

Answer 3

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)