Blog- AngularJS-Simple-service

HTML

<div ng-app="myApp">
    <div ng-controller="ControllerA">
        ControllerA.message = {{message}}<br/>
        <a href="#" ng-click="updateMessage()">update</a>
    </div>
    <hr/>
    <div ng-controller="ControllerB">
        ControllerB.message = {{message}}<br/>
        <a href="#" ng-click="updateMessage()">update</a>          
    </div>
</div>

JavaScript

angular.module('myApp', [])
    .factory('myService', function($q, $timeout) {
        var getMessages = function() {
            var deferred = $q.defer();
            
            $timeout(function() {
                message = 'Hello world!';
                deferred.resolve(message);
            }, 2000);
            
            return deferred.promise;
        };
    
      return {
        getMessages: getMessages
      };

    })

function ControllerA($scope, myService, $rootScope) {
    $scope.message = myService.getMessages();
    $scope.updateMessage = function () {
        $scope.message = 'Hello Max';
        $rootScope.message = 'Hello Max';
    };
}

function ControllerB($scope, myService, $timeout, $rootScope) {
    $scope.message = myService.getMessages();

    $rootScope.$watch('message', function (oldV, newV) {
        if(oldV === undefined && oldV === newV) return;
        $scope.message = $rootScope.message;
    });
}