angular event $broadcast + $emit

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.0.7" data-semver="1.0.7" src="http://code.angularjs.org/1.0.7/angular.min.js"></script>
    <script data-require="jquery@2.0.0" data-semver="2.0.0" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script data-require="underscore.js@1.4.4" data-semver="1.4.4" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="TestApp">
      <div ng-controller="ParentCtrl">
        <div ng-controller="SelfCtrl">
          <div ng-controller="ChildCtrl">
            
          </div>
        </div>
      </div>
    <h1>Hello Plunker!</h1>
  </body>

</html>

// Code goes here



angular.module('TestApp', ['ng'])
.controller('ParentCtrl', function($scope) {
 $scope.$on('to-child', function(d) {
   console.log('none of my business.');
 });
 
 $scope.$on('to-parent', function(d) {
   console.log('hahahaha');
 });
})
.controller('SelfCtrl', function($scope) {
  $scope.$broadcast('to-child', 'haha');
  $scope.$emit('to-parent', 'haha');
})
.controller('ChildCtrl', function($scope){
  $scope.$on('to-child', function(d) {
    console.log(d);
  })
})
;

/* Styles go here */