AngularJS - Communication Between Controllers

This is an example of how to use a custom service to facilitate communicate between multiple controllers using $rootscope as an event bus.

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc9.js"></script>
<div ng-controller="ControllerZero">
    <input ng-model="message" >
    <button ng-click="handleClick(message);">LOG</button>
</div>

<div ng-controller="ControllerOne">
    <input ng-model="message" >
</div>

<div ng-controller="ControllerTwo">
    <input ng-model="message" >
</div>

JavaScript

var myModule = angular.module('myModule', []);
myModule.factory('mySharedService', function($rootScope) {
    var sharedService = {};
    
    // expose service data to angular scope
    $rootScope.sharedData = sharedService.data = {};
    sharedService.data.message = '';

    return sharedService;
});

function ControllerZero($scope, sharedService) {
    $scope.handleClick = function(msg) {
        sharedService.data.message = msg;            
    };
        
    $scope.$watch('sharedData.message', function(msg) {
        $scope.message = msg;
    });
}

function ControllerOne($scope, sharedService) {
    $scope.$watch('sharedData.message', function() {
        $scope.message = 'ONE: ' + sharedService.data.message;
    });
}

function ControllerTwo($scope, sharedService) {
    $scope.$watch('sharedData.message', function(msg) {
        $scope.message = 'ONE: ' + msg;
    });
}

ControllerZero.$inject = ['$scope', 'mySharedService'];        
        
ControllerOne.$inject = ['$scope', 'mySharedService'];

ControllerTwo.$inject = ['$scope', 'mySharedService'];