Angular: Ctrl 2 Ctrl using $broadcast

Demo to show communication between multiple controllers using event broadcasting.

by Pratik Bhattachary

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<script src="https://opensource.keycdn.com/angularjs/1.5.0/angular.min.js "></script>
<div ng-controller="Notifications">
  <h1>
Current Notifications
</h1>
  <div ng-repeat="message in messages">
    {{message}}
  </div>
</div>
<hr/>
<div ng-controller="Emp">
  <h1>
Employee Creation
</h1> ID -
  <input type="text" ng-model="employee.Id" />
  <br/> Name -
  <input type="text" ng-model="employee.Name" />
  <br/> Alias -
  <input type="text" ng-model="employee.Alias" />
  <br/>
  <button ng-click="createEmp()">
    Create
  </button>
</div>
<hr/>
<div ng-controller="Mgr">
  <h1>
Manager Creation
</h1> ID -
  <input type="text" ng-model="manager.Id" />
  <br/> Name -
  <input type="text" ng-model="manager.Name" />
  <br/> Alias -
  <input type="text" ng-model="manager.Alias" />
  <br/>
  <button ng-click="createMgr()">
    Create
  </button>
</div>

JavaScript

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

myApp.controller("Emp", function($rootScope, $scope) {
  $scope.employee = {}

  $scope.createEmp = function() {
    $rootScope.$broadcast("employee.created", $scope.employee);
  }
});

myApp.controller("Mgr", function($rootScope, $scope) {
  $scope.manager = {}

  $scope.createMgr = function() {
    $rootScope.$broadcast("manager.created", $scope.manager);
  }
});

myApp.controller("Notifications", function($scope) {
  $scope.messages = [];

  $scope.$on("employee.created", function(event, args) {
    $scope.messages.push("New Employee has been created - " + args.Name);
  });
  $scope.$on("manager.created", function(event, args) {
    $scope.messages.push("New Manager has been created - " + args.Name);
  });

})