JSFiddle - React, Tailwind, and code Playground

by Samar Pattanayak

HTML

<script src="  &lt;script src=&quot;angular.ng-modules.js&quot;&gt;&lt;/script&gt;  "></script>
<div ng-app="myApp">
  <div ng-controller="myController">
  {{val}}
  </div>
  <div ng-controller="MainCtrl">
  </div>
</div>

JavaScript

var ang= angular.module("myApp", []);
ang.controller("myController", function($scope,$rootScope,$timeout ){
	$scope.val="$timeout vs $evalAsync";
	$scope.click= function(){
  	setTimeout(function(){
    	$scope.val="value changed in settimeout function after 2 seconds";
      $rootScope.$apply(function(){
      	console.log("apply is running");
      });
    },2000)
  };
  $scope.click();
})

ang.controller('MainCtrl', function($scope,$timeout) {
  
  $scope.$watch(function () { },
    function (newValue, oldValue, scope) { 
      
      $timeout(function () {
        
        console.log('This will not work');
      });
    }
  );
    
  $scope.$watch(function () { },
    function (newValue, oldValue, scope) { 
      
      $scope.$applyAsync(function () {
        
        console.log('This will work as you are using $applyAsync!');
      });
    }
  );
});