var app = angular.module('MainCtrl', []);
app.controller('controller1',['$scope','$rootScope',function($scope,$rootScope){

   $scope.rootBroadcast = function() {
	   $rootScope.$broadcast('Tree1Event','$rootScope.$broadcast');
   };
   $scope.rootEmit = function() {
	   $rootScope.$emit('Tree1Event','$rootScope.$emit');
   };
  
}])

.controller('GrandParent1',['$scope','$rootScope',function($scope,$rootScope){
   $scope.GrandParent1Var = '';
   //Listening the Tree 1 Child Event
   $scope.$on('T1childEmitEvent',function(e,arg){
	console.log("Hello");
	$scope.T1EventVar = arg;
   });
	// Listening to Tree 2 Grand Parent Event
   $scope.$on('Tree1Event',function(e,arg){
	$scope.T1EventVar = arg;
   });
   $scope.broadCastEvent=function(){
	   console.log("broadCastEvent");
	 $scope.$broadcast('Tree1Event','T1 Grand Parent Brodacated');
   };
   $scope.emitEvent=function(){
	 $scope.$emit('Tree1Event','T1 Grand Parent Emitted');
   };
}])
.controller('T1Parent',['$scope',function($scope){
   $scope.T1EventVar = '';
    $scope.stopPropagation=false;
   $scope.$on('Tree1Event',function(e,arg){
	   console.log("T1EventVar");
	$scope.T1EventVar = arg;
	   // stop propagation
		if($scope.stopPropagation) {
		e.stopPropagation();
	}

   });
   $scope.broadCastEvent=function(){
	 $scope.$broadcast('Tree1Event','T1 Parent Brodacated');
   };
   $scope.emitEvent=function(){
	 $scope.$emit('Tree1Event','T1 Parent Emitted');
   };
}])

.controller('T1Child',['$scope','$rootScope',function($scope,$rootScope){
	$scope.T1EventVar = '';
	$scope.T1EventVarFromRoot = '';
   $scope.$on('Tree1Event',function(e,arg){
	console.log(e);
	$scope.T1EventVar = arg;
   });
   
   $scope.emitEvent = function() {
	  $scope.$emit('Tree1Event','T1 Child Emitted');
   };

   $scope.broadCastEvent=function(){
	    $scope.$broadcast('Tree1Event','T1 Child Brodacated');
	    
	 //$rootScope.$broadcast('Tree1Event','$rootScope.$broadcast');
   };
   
   $rootScope.$on('Tree1Event',  function(e,arg){
	   $scope.T1EventVar = arg;
   });
   
}])

.controller('GrandParent2',['$scope',function($scope){
   $scope.T1EventVar = '';
   //Listening the Tree 1 Child Event
   $scope.$on('Tree1Event',function(e,arg){
	$scope.T1EventVar = arg;
   });

   $scope.broadCastEvent=function(){
	 $scope.$broadcast('Tree1Event','T2 Grand Parent Brodacated');
   };

   $scope.emitEvent=function(){
	 $scope.$emit('Tree1Event','T2 Grand Parent Emitted');
   };
}])
.controller('T2Parent',['$scope',function($scope){
   $scope.T1EventVar = '';
   $scope.$on('Tree1Event',function(e,arg){
	$scope.T1EventVar = arg;
   }); 
   
   $scope.emitEvent = function() {
	$scope.$emit('Tree1Event','T2 Parent Emitted');
   };

   $scope.broadCastEvent=function(){
	 $scope.$broadcast('Tree1Event','T2 Parent Brodacated');
   };
}])
.controller('T2Child',['$scope',function($scope){
	$scope.T1EventVar = '';
   $scope.$on('Tree1Event',function(e,arg){
	$scope.T1EventVar = arg;
   });
   $scope.emitEvent = function() {
	$scope.$emit('Tree1Event','T2 Child Emitted');
   };

   $scope.broadCastEvent=function(){
	 $scope.$broadcast('Tree1Event','T2 Child Brodacated');
   };
   
}]);

<!DOCTYPE html>
<html ng-app="MainCtrl">

  <head>
    <meta charset="utf-8" />
    <title>Event based communication between controllers</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"  rel="stylesheet"></link>
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <div class="container">
		<div class="jumbotron">
			<table class="table">
        <tr ng-controller="controller1">
          <td colspan="2">
  					<button ng-click="rootBroadcast()">$rootScope.$broadcast</button>
					  <button ng-click="rootEmit()">$rootScope.$emit</button>
          </td>
        </tr>
				<tr>
					<td ng-controller="GrandParent1" class="success">
						<table class="table" class="success">
							<tr class="success">
								<td >
									<h2>Tree 1 : Grand parant</h2>
									<table class="table">
										<thead>
											<tr>
												<th>Event</th>
												<th>Event</th>
												<th>Listener1</th>
												 
											</tr>
										</thead>
										<tbody>
											<tr>
												<td><button ng-click="broadCastEvent()">Broadcast
													</button></td>
												<td><button ng-click="emitEvent()">Emit</button></td>
												<td>{{T1EventVar}}</td>
												 
											</tr>
										</tbody>
									</table>
								</td>
							</tr>
							<tr>
								<td class="info">
									<table class="table" ng-controller="T1Parent">
									<tr>
									<td class="info">
									<h2 >Tree 1 : Parent</h2>
									<div><input type="checkbox" ng-model="stopPropagation"> Stop Propagation</div>
							<div><input type="checkbox" ng-model="stopBroadcast"> Deregister this controller from listening</div>		
									<table class="table">
										<thead>
											<tr>
												<th>Event</th>
												<th>Event</th>
												<th>Listener1</th>
												 
											</tr>
										</thead>
										<tbody>
											<tr>
												<td><button ng-click="broadCastEvent()">Broadcast
													</button></td>
												<td><button ng-click="emitEvent()">Emit</button></td>
												<td>{{T1EventVar}}</td>
												 
											</tr>
										</tbody>
									</table>
									</td>
									</tr>
									<tr>
									<td class="danger">
									<h2>Tree 1 : Grand Child</h2>
									<table class="table" ng-controller="T1Child">
										<thead>
											<tr>
												<th>Event</th>
												<th>Event</th>
												<th>Listener1</th>
												 
											</tr>
										</thead>
										<tbody>
											<tr>
												<td><button ng-click="broadCastEvent()">Broadcast
													</button></td>
												<td><button ng-click="emitEvent()">Emit</button></td>
												<td>{{T1EventVar}}</td>
												 
											</tr>
										</tbody>
									</table>
									</td>
									</tr>
									</table>
								</td>
							</tr>
						</table>
					</td>
				<!-- tree 2 starts -->
					<td ng-controller="GrandParent2" class="success">
						<table class="table" class="success" >
							<tr class="success">
								<td >
									<h2>Tree 2 : Grand parant</h2>
									<table class="table">
										<thead>
											<tr>
												<th>Event</th>
												<th>Event</th>
												<th>Listener1</th>
												 
											</tr>
										</thead>
										<tbody>
											<tr>
												<td><button ng-click="broadCastEvent()">Broadcast
													</button></td>
												<td><button ng-click="emitEvent()">Emit</button></td>
												<td>{{T1EventVar}}</td>
												 
											</tr>
										</tbody>
									</table>
								</td>
							</tr>
							<tr>
								<td class="info">
									<table class="table" ng-controller="T2Parent">
									<tr>
									<td class="info">
									<h2 >Tree 2 : Parent</h2>
									<table class="table">
										<thead>
											<tr>
												<th>Event</th>
												<th>Event</th>
												<th>Listener1</th>
												 
											</tr>
										</thead>
										<tbody>
											<tr>
												<td><button ng-click="broadCastEvent()">Broadcast
													</button></td>
												<td><button ng-click="emitEvent()">Emit</button></td>
												<td>{{T1EventVar}}</td>
												 
											</tr>
										</tbody>
									</table>
									</td>
									</tr>
									<tr>
									<td class="danger">
									<h2>Tree 2 : Grand Child</h2>
									<table class="table" ng-controller="T2Child">
										<thead>
											<tr>
												<th>Event</th>
												<th>Event</th>
												<th>Listener1</th>
												 
											</tr>
										</thead>
										<tbody>
											<tr>
												<td><button ng-click="broadCastEvent()">Broadcast
													</button></td>
												<td><button ng-click="emitEvent()">Emit</button></td>
												<td>{{T1EventVar}}</td>
												 
											</tr>
										</tbody>
									</table>
									</td>
									</tr>
									</table>
								</td>
							</tr>
						</table>
					
					</td>

				</tr>
			</table>
		</div>
		</div>
  </body>

</html>
/* Put your css in here */