With Angular 1.3 you now have access to `$scope.$watchGroup`. This allows you to monitor an array of expressions for change. This is useful when you want to perform the some logic when any item in a group changes.

New in Angular 1.3 - $scope.$watchGroup

Man 1: [00:00] This is another video about the cool things coming in Angular 1.3.  As you can see, I'm using release candidate .3 here. We're going to be talking about scope.watchGroup. WatchGroup is coming in 1.3. It's actually very simple.

[00:14] You just say, "Scope.watchGroup." You hand it an array and a listener. Then that array of things will be watched.

[00:25] We have a very simple demo app here. Labels and inputs bound to the vals, as you can see here.

[00:32] We want to watch the value of all of these and respond in the same way for every one of these. And so, this is a good use case for watchGroup.

[00:40] All that you need to do is give an array of expressions. We can say val 1, val 2, val 3, val 4. This is because all of those are on the scope.

[00:55] If we had something else that we wanted to watch, as well, then we'd say function and return some value. That would also be a legitimate, valid expression.

[01:07] But just for simplicity here, it's basically anything that you would pass in a normal scope.watch. Anything that you'd pass in as the first argument here, right here, would be considered a valid expression that you could put as an item in this array.

[01:26] Let's see what we get as our arguments to our listener function. Let's say newVal, oldVal. We'll assign this to the scope so scope.newVal = newVal. Scope.oldVal = oldVal. Then we'll just add those here.

[01:45] We'll say h3newVal and pre newVal. Pipe that through json. We'll do the same for oldVal.

[01:57] Now, as I change things, watch what happens. NewVal now has val for the first item. OldVal still has val 1. That's expected. You can see, as I change things that's how it's being updated.

[02:13] You see the order of items in this array, in the newVal array, being assigned to this newVal is the same order as this watch group.

[02:23] And so, I could say, "Scope.newVal1 = newVal" and the first item in the array, for example.

[02:36] That's what watchGroup does. It is pretty simple. Hopefully you can find a good use for it.

New in Angular 1.3 - $scope.$watchGroup

Share this video with your friends