AngularJs Watch

by saidulu401

HTML

<body ng-app="MY_APP">
  <div ng-controller="MyCtrl">
  <div>
  {{usersLog}}
  </div>
  <div>
 users watch -  {{userswatch}}
  </div>
  <div>
 userswatchCollection -  {{userswatchCollection}}
  </div>
  <div>
 userswatchTrue -  {{userswatchTrue}}
  </div>
  </div>
</body>

JavaScript

angular.module('MY_APP', []).controller('MyCtrl', MyCtrl)
function MyCtrl($scope,$timeout) {
  $scope.users = [{"name": "vinoth"},{"name":"yusuf"},{"name":"rajini"}];
$scope.usersLog = [];$scope.userswatch = [];$scope.userswatchCollection = [];$scope.userswatchTrue = [];
  $scope.$watch("users", function() {
    console.log("**** reference checkers $watch ****")
    $scope.userswatch.push("**** reference checkers $watch ****")
  });
  
  $scope.$watchCollection("users", function() {
    console.log("**** Collection  checkers $watchCollection ****")
    $scope.userswatchCollection.push("**** Collection  checkers $watchCollection ****")
  });
  
  $scope.$watch("users", function() {
    console.log("**** equality checkers with $watch(true) ****")
    $scope.userswatchTrue.push("**** equality checkers with $watch(true) ****")
  }, true);
  
  $timeout(function(){
  $scope.usersLog.push("Triggers All")
     console.log("Triggers All ")
     $scope.users = [];
     $scope.$digest();
     
     console.log("Triggers $watchCollection and $watch(true)")
     $scope.usersLog.push("Triggers $watchCollection and $watch(true)")
     $scope.users.push({ name: 'Thalaivar'});
     $scope.$digest();
     
     console.log("Triggers $watch(true)");
     $scope.usersLog.push("Triggers $watch(true)");
     $scope.users[0].name = 'Superstar';
     $scope.$digest();
  });
}