Angularjs Examples

AJS Examples

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.


$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>        
<head> <!-- -->        
  <script src="//"></script>         
    <meta charset="utf-8">        
    <title>AngularJS $watchGroup Example</title>        
var app = angular.module('app', []);        
    app.controller("WatchGroupController", function ($scope) {
      $ = 'Cricket';
      $scope.score = 250;
    $scope.$watchGroup(['game', 'score'], function(newValues, oldValues) {
        if (newValues[0] !== undefined) {
            $ = newValues[0];

        if (newValues[1] !== undefined) {
            $scope.score = newValues[1];
<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;">
   <p style="font-family:Arial;color:yellow;background:steelblue;padding:3px;width:350px;">

See Live Example