JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app='myApp'>
    <div ng-controller="Ctrl1">
           {{foo}}
    </div>
    <div ng-controller="Ctrl2">
           {{foo}}
    </div>    
</div>

JavaScript

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

myApp.service("CommonFunctions", ['WatchService', function(WatchService) {
    var commonFunctions = {};
    commonFunctions.init = function(scope){
        scope.$watch(function() { return WatchService.update }, function(){ scope.foo++ })
    };
    return commonFunctions;
}]);

myApp.factory('WatchService', function () {
    return {
        update: 0
    };
});

myApp.controller('Ctrl1', 
['$scope','$interval','WatchService','CommonFunctions',function($scope,$interval,WatchService,CommonFunctions) {
    CommonFunctions.init($scope)
    $scope.foo = 0
    $interval(function() {
        WatchService.update++
    },100);
}]);

myApp.controller('Ctrl2', 
['$scope','CommonFunctions',function($scope,CommonFunctions) {
    CommonFunctions.init($scope)
    $scope.foo = 100000
}]);