AngularJS - Example - $emit $on $broadcast

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example43-production</title>
  <link href="style.css" rel="stylesheet" type="text/css">
  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.min.js"></script>
  <script src="script.js"></script>
  

  
</head>
<body ng-app="app">
  <div ng-controller="MainController">
    <h1>MainController</h1>
    
    <div ng-controller="ParentController">
      <h1>ParentController</h1>
      <input ng-model="parentData.message" />
      <button ng-click="broadcastEvent()">broadcast event from ParentController</button>
      
      <br><br>
      
      <div ng-controller="ChildController">
      <h1>ChildController</h1>
        <input ng-model="childData.message" />
        <button ng-click="emitEvent()">emit event from ChildController</button>
      </div>
    </div>
    
    <br><br>
    
    <h1>LOGS:</h1>
    <pre><code>{{ mainData.logs }}</code></pre>
    
  </div>
  
</body>
</html>

(function(angular) {
  'use strict';

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

app.controller('MainController', function($scope, $rootScope) {
  $scope.mainData = {
    logs: ''
  };
  
  $scope.$on('eventEmitedName', function(event, data) {
    $scope.mainData.logs = $scope.mainData.logs + '\nMainController - receive EVENT "' + event.name + '" with message = "' + data.message + '"';
  });
  
  $rootScope.$on('eventEmitedName', function(event, data) {
    $scope.mainData.logs = $scope.mainData.logs + '\n$rootScope - receive EVENT "' + event.name + '" with message = "' + data.message + '"';
  });
});

app.controller('ParentController', function($scope) {
  $scope.parentData = {
    message: 'messageAAA'
  };
  
  $scope.broadcastEvent = function() {
    $scope.$broadcast('eventBroadcastedName', $scope.parentData);
  };
  
  $scope.$on('eventEmitedName', function(event, data) {
    $scope.mainData.logs = $scope.mainData.logs + '\nParentController - receive EVENT "' + event.name + '" with message = "' + data.message + '"';
  });
});

app.controller('ChildController', function($scope) {
  $scope.childData = {
    message: 'messageBBB'
  };
  
  $scope.emitEvent = function() {
    $scope.$emit('eventEmitedName', $scope.childData);
  };
  
  $scope.$on('eventBroadcastedName', function(event, data) {
    $scope.mainData.logs = $scope.mainData.logs + '\nChildController - receive EVENT "' + event.name + '" with message = "' + data.message + '"';
  });
});
  
})(window.angular);




textarea {
  
  width: 95%;
  height: 400px;
}

div[ng-controller] {
  margin: 15px;
  padding: 15px;
  border: 1px solid red;
}