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.$broadcast("HelloEvent", {
            msg: $scope.message
        });
    };
}

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

    $rootScope.$on("HelloEvent", function (event, message) {
        $scope.message = message.msg;
    });
}