Angular: Broadcast

http://angularjs.org/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div ng-controller="MyCtrl1">
    Breadcast message: {{ message }}
    <br /><br />
    <div my-directive="test1"></div>
    <div my-directive="test2"></div>
</div>

<div ng-controller="MyCtrl2">
    <input type="text" name="message" ng-model="message" />
    <button class="btn btn-primary" ng-click="doBroadcast()">Broadcast</button>
    
    <br >
    <div my-directive="test3"></div>
    <div my-directive="test4"></div>
</div>

JavaScript

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

myApp.directive('myDirective', function() {
    return {
        restrict: 'A',
        controller: 'MyCtrl1', 
        link: function (scope, element, attrs, ctrl) {
            element.html(attrs.myDirective + ' - ' + scope.variable);
        }
    };
});

myApp.controller('MyCtrl1', function($scope) {
    
    $scope.variable = "MyCtrl1 Variable";
    
    $scope.$on('message', function ($event, message) {
        console.log("message recieved");
        $scope.message = message;
    });
    
});

myApp.controller('MyCtrl2', function($scope, $rootScope) {
    
    $scope.doBroadcast = function() {
        console.log('broadcast message');
        $rootScope.$broadcast('message', $scope.message);
    }
    
});