AngularJS $scope.$watchGroup() Function

The AngularJS $watchGroup() function is used to monitor changes in an array on the $scope. If anyone expression in the array changes the listener is executed. The $watchGroup() function was introduced in AngularJS 1.3. This method is for watching changes of scope variables. This function has callback function which gets called when the watching properties are changed.

The $scope.$watchGroup() function requires two parameters: watchExpressionand listener parameters.

Syntax

$scope.$watchGroup(watchExpression, listener);

In the $watchGroup method watchExpression is the array in the scope to watch.
In the $watchGroup method listener is a function that is called whenever any expression in the watchExpressions array changes.

AngularJS $scope.$watchGroup() Function Example

<!DOCTYPE html>        
<html>        
<head> <!-- www.techstrikers.com -->        
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.19/angular.min.js"></script>         
    <meta charset="utf-8">        
    <title>AngularJS $watchGroup Example</title>        
  <script>        
var app = angular.module('app', []);        
    app.controller("WatchGroupController", function ($scope) {
      $scope.game = 'Cricket';
      $scope.score = 250;
    $scope.$watchGroup(['game', 'score'], function(newValues, oldValues) {
        if (newValues[0] !== undefined) {
            $scope.game = newValues[0];
        }

        if (newValues[1] !== undefined) {
            $scope.score = newValues[1];
        }
    });
    });
</script>        
</head>        
<body style="background-color:#DDE4E9;">        
  <fieldset style="background-color:#DDE4E9;">                    
    <legend>AngulerJS $watchGroup Function Example</legend>         
  <div ng-app="app">              
    <div ng-controller="WatchGroupController"> 
      
        Game: <input type="text" ng-model="game" /></br>
      Score: <input type="text" ng-model="score" />
    <p style="font-family:Arial;color:yellow;background:steelblue;padding:3px;width:350px;">
			{{game}}
		  </p>
   <p style="font-family:Arial;color:yellow;background:steelblue;padding:3px;width:350px;">
			{{score}}
		  </p>

    </div>              
</div>        
 </fieldset>         
</body>        
</html>

See Live Example

« Previous

AngularJS Code Examples

AngularJS Live Demo

ASP.NET Code Examples

Javascript Code Examples

Interview Q & A

Google MAP API Live Demo

Google MAP API Code Examples

Utility Tools

Articles

Angularjs Tutorials

Angularjs References

Angularjs Examples

AngularJS $scope.$watchGroup() Function

AngularJS $scope.$watchGroup() Function Example

Recent Articles