The `$watchCollection` method on Angular scopes provides a convenient way to watch for changes on the *shallow* properties of an object.

Using the AngularJS scope's $watchCollection method

[00:00] So we've now seen how to watch a simple value like user.password, which in this case, is just going to be a string. If we start typing here, we can see we get an incremental version of that value. If you want to watch something like an object, it's a little bit different.

[00:24] If we change this to the user object, instead of this and then rerun it, you can see initially we have undefined for both the new value and the old value. Then as we type the first letter, we get this new object who has a password property of E and then undefined was our old value.

[00:42] If we then type another letter, we don't actually get notified of any of these new changes and that's because by default scope.watch does reference a quality. It makes sure that it's a new object.

[00:56] In this case, we're not getting new object each time, we're just modifying the password property. One way you can get around this is to use that third property that we talked about before, which is the object equality property. Just to show that this works, we now get notified the first time, but we also get notified on subsequent entries.

[01:22] The way that this is doing this is this true argument tells it don't look for a reference equality just make sure that the objects are loosely equivalent. Essentially what this is doing behind the scenes is it's serializing these objects and copying them and doing a comparison of those.

[01:44] When it compares, for instance this time, it has made a copy of the object whose password property was E, compared it to this one, whose property is EG and that's different, so we get notified. Because it's serializing and copying that object, this is going to be pretty expensive in terms of the load that it puts on the parser and the framework.

[02:11] A better way to do this, if you want to watch an object, is to get rid of this and use the watch collection method. What this is actually going to do is it's going to watch all of the shallow properties on this object for us. It's going to look at user. It's going to look at all the property in user.

[02:36] What we can now do is going over here and type and you can see that we do, again, get notified of all these changes. In this case, it's not requiring angular to make copies of those objects.

[02:47] Watch collection can also be used for watching arrays, but it's actually not really necessary or arrays because a regular watch will work to compare arrays. I believe what it's doing behind the scenes is just doing a two string, so array is actually will show up as different when parsed to a string, whereas objects won't.

Using the AngularJS scope's $watchCollection method

Share this video with your friends