JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="centralizedData">
    
    <div ng-controller="FirstController">
        <h1>{{data.message}}</h1>
    </div>
    <div ng-controller="SecondController">
        <h1>{{data.message}}</h1>
    </div>

JavaScript

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

app.service('CentralService', function($q, $timeout) {
    var self  = this,
        count = 0
        ;
    
    this.centralData = {};
    
    this.getData = function() {
        $timeout(function() {
            self.centralData.message = 'Hello: ' + count++;
        });
    };
});

app.controller('FirstController', function($scope, CentralService) { 
    $scope.data = CentralService.centralData;   
    CentralService.getData();
});

app.controller('SecondController', function($scope, CentralService) {
    $scope.data = CentralService.centralData;
    setTimeout(CentralService.getData, 2000);
});