属性更改时不会触发$ watch的对象

Question

I have one object:

$scope.obj = {bar: 'bar value', foo: 'foo value'};

and I want to to know if bar, foo or both change.

I'm doing this:

$scope.$watch('obj', function() { console.log("watching obj") });

and If I change the object's attributes "watching obj" message It never shows. However, if I watch 'obj.foo' or 'obj.bar' I can see the message. So, the question is:

Why the message isn't showing when I watch 'obj' ? and how can I do this?

This plunker shows the problem better...

Answer 1

You need to set the objectEquality argument to true .

http://docs.angularjs.org/api/ng .$rootScope.Scope

// $watch(watchExpression, listener, objectEquality)

$scope.$watch('obj', function() {
    console.log("watching obj")
}, true);

Answer 2

I will just add to @moderndegree's answer,

If the object you want to watch has a few elements ( in this case only two) you can also use

$scope.$watch('obj.foo+obj.bar', function() {
    console.log("changed");
});

Which is more efficient than deep watching.