Blog- AngularJS-Simple-service-with-broadcast

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.6/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="ControllerA">
        ControllerA.X = {{x}}<br/>
        <a ng-click="incrementDataInService()">Click here to increment by {{incrementBy}}</a><br>     
    </div>
    <hr/>
    <div ng-controller="ControllerB">
        ControllerB.X = {{x}}<br/>
        <a ng-click="incrementDataInService()">Click here to increment by {{incrementBy}}</a><br>     
     </div>
</div>

JavaScript

angular.module('myApp', [])
    .service('myService',  function ($rootScope) {
        var x = 1; // set init value to 1
        return {
            increase : function(num) {
                x = x + num;
                // Broadcast custom event "XChanged"
                $rootScope.$broadcast('XChanged', x);
            }
       };
    })

function ControllerA($scope, myService) {
    $scope.x = 1;
    $scope.incrementBy = 1;
    $scope.incrementDataInService= function() {
        myService.increase($scope.incrementBy);
    }
    // Listen for updates from custom event "XChanged"
    $scope.$on('XChanged', function(event, x) {
        $scope.x = x;
    });        
}
    
function ControllerB($scope, myService) {
    $scope.x = 1;
    $scope.incrementBy = 10;
    $scope.incrementDataInService= function() {
        myService.increase($scope.incrementBy); // triggers $broadcast in service
    }
    // Listen for updates from custom event "XChanged"
    $scope.$on('XChanged', function(event, x) {
        $scope.x = x;
    });           
}