JSFiddle - React, Tailwind, and code Playground

by M Rahul Reddy

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<div ng-app = "myapp">
    {{data.time}}

<br/>
    <button ng-click="updateTime()">update time - ng-click</button>
    <button id="updateTimeButton"  >update time</button>

</div>

JavaScript

var app = angular.module('myapp', []);
 		app.run(function($rootScope){
    /* to use scope variables:
    Give ng-controller="ctrlname" in html, beside ng-app
    and in js,
    app.controller('ctrlname',function($scope){
    
    })
    */
   $rootScope.data = { //you can do the same with scope variables too.
        time : new Date()
        }

       $rootScope.updateTime = function() {
            $rootScope.data.time = new Date();
        }

        document.getElementById("updateTimeButton")
                .addEventListener('click', function() {
  // instead $apply you can use $scope.$digest() after line #23. #apply runs the digest function at the end which would update the DOM and check for watchers value function.
                $rootScope.$apply(function(){ 
									  console.log("update time clicked");
            				$rootScope.data.time = new Date();        
                });

        });
  });