AngularJS: - $watchGroup() Usage (watch multiple models)

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> 
    <script src="script.js"></script>
  </head>

  <body>
    
    <div ng-controller="mainCtrl">
      a: <input type="text" value="" ng-model="a">
      <br>
      b: <input type="text" value="" ng-model="b">
      <br>
      c: <input type="text" value="" ng-model="c">
      <br>
      d: <input type="text" value="" ng-model="d">
      <br><br>    
      
      Changes to:
      <br><br>
        {{model}}
    </div>
    
  </body>

</html>

// Code goes here
var app = angular.module("app",[]);
app.controller("mainCtrl",function($scope){
$scope.a = "";
$scope.b = "";
$scope.c = "";
$scope.d = "";
$scope.array =  ['a', 'b','c','d'];
$scope.$watchGroup($scope.array, function(newValue, oldValue, scope) {
  // newValues array contains the current values of the watch expressions
  // with the indexes matching those of the watchExpression array
  // i.e.
  // newValue[0] -> $scope.a OR oldValue[0] -> $scope.a
  // newValue[1] -> $scope.b OR oldValue[1] -> $scope.b
  scope.model = []; 
  for (var i=0;i<newValue.length;i++){ 
    if (newValue[i]!==oldValue[i]) {
      scope.model.push({input:scope.array[i],value:newValue[i]})
    }
  }
});

// Watch multple items using $watch()
$scope.$watch(
  function() {
    return angular.toJson([$scope.a, $scope.b]);
  },
  function(newValue, oldValue,scope) {
    if(newValue !== oldValue){
      console.log(newValue, oldValue);
    }
    // Stuff to do after either value changes
  });


});

/* Styles go here */