AngularJS - Communication Between Controllers & Directive

This is an example of how to use a custom service to facilitate communicate between multiple controllers using $rootscope as an event bus. I added in a directive just for fun.

by nopctoday

HTML

<div ng-module="myapp">
    <div ng-controller="ControllerZero">
        <button ng-click="pass_data()">BROADCAST</button>
    </div>
    
    <div ng-controller="ControllerOne">
        {{data}}
    </div>
</div>

JavaScript

var myModule = angular.module('myapp', []);

app.controller('ControllerZero',['$scope',function($scope){
    $scope.pass_data = function() {
        $scope.$emit('broadcasting', 'it succeeded!');
    };
}]);

app.controller('ControllerOne',['$scope', function($scope){
    $scope.data = "";
    $scope.$on('broadcasting', function(event, data) {
        $scope.data = data;
    });
}]);