JSFiddle - React, Tailwind, and code Playground

by chandings

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.19/angular.js"></script>
<div ng-app="myApp" ng-controller="myController">
    <span>Random Data being watch: {{data}}</span><br>
    <span>Number of times Data Updated: {{dataUpdated}}</span><br>
    <span>Number of times watch called: {{watchCalled}}</span>
</div>

JavaScript

var myApp = angular.module("myApp",[]);

myApp.factory("randomService", function($timeout){
    var retValue = {};
    var data = 0;
    
    retValue.startService = function(){
        updateData();
    }
    
    retValue.getData = function(){
        return data;
    }
    
    function updateData(){
        $timeout(function(){
            data = Math.floor(Math.random() * 100);
        }, 500);
    }
    
    return retValue;
});

myApp.controller("myController", function($scope, randomService){
    $scope.data = 0;
    $scope.dataUpdated = 0;
    $scope.watchCalled = 0;
    randomService.startService();
    
    $scope.getRandomData = function(){
        return randomService.getData();    
    }
    
    $scope.$watch(function(newValue, oldValue){
        if(oldValue != newValue){
            $socpe.data = newValue;
            $scope.dataUpdated++;
        }
            $scope.watchCalled++;
    });
});