JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<body ng-app="MY_APP">
  <div ng-controller="MyCtrl">
  </div>
</body>

JavaScript

angular.module('MY_APP', []).controller('MyCtrl', MyCtrl)
function MyCtrl($scope,$timeout) {
  $scope.users = [{"name": "vinoth"},{"name":"yusuf"},{"name":"rajini"}];

  $scope.$watch("users", function() {
    console.log("**** reference checkers $watch ****")
  });
  
  $scope.$watchCollection("users", function() {
    console.log("**** Collection  checkers $watchCollection ****")
  });
  
  $scope.$watch("users", function() {
    console.log("**** equality checkers with $watch(true) ****")
  }, true);
  
  $timeout(function(){
     console.log("Triggers All ")
     $scope.users = [];
     $scope.$digest();
     
     console.log("Triggers $watchCollection and $watch(true)")
     $scope.users.push({ name: 'Thalaivar'});
     $scope.$digest();
     
     console.log("Triggers $watch(true)")
     $scope.users[0].name = 'Superstar';
     $scope.$digest();
  });
}