$emit vs $broadcast

This is a demonstration of $emit and $broadcast and how it works.

by chandings

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="demo">
  <p>This is out of any controller. Please click below buttons to emit or broadcast from root scope.</p>
  <button ng-click="rootClickHandler('$emit', 'broadcast from root scope')">emit from root scope</button>
  <button ng-click="rootClickHandler('$broadcast', 'broadcast from root scope')">broadcast from root scope</button>
  <fieldset ng-controller="outermostcntrlr">
    <legend>Outer</legend>
    <p>This is the outer controller. Please click below buttons to emit or broadcast.</p>
    <button ng-click="outerClickHandler('$emit','emit from outer scope', false)">emit from outer scope</button>
    <button ng-click="outerClickHandler('$broadcast','broadcast from outer scope', false)">broadcast from outer scope</button>
    <fieldset ng-controller="middlecntrlr">
      <legend>Middle</legend>
      <p>This is the middle controller. Please click below buttons to emit or broadcast.</p>
      <button ng-click="middleClickHandler('$emit','emit from middle scope', false)">emit from middle scope</button>
      <button ng-click="middleClickHandler('$broadcast','broadcast from middle scope', false)">broadcast from middle scope</button>
      <fieldset ng-controller="innermostcntrlr">
        <legend>Inner</legend>
        <p>This is the inner controller. Please click below buttons to emit or broadcast.</p>
        <button ng-click="innerClickHandler('$emit','emit from inner scope', false)">emit from inner scope</button>
        <button ng-click="innerClickHandler('$broadcast','broadcast from inner scope', false)">broadcast from inner scope</button>
      </fieldset>
    </fieldset>
  </fieldset>
  <fieldset class="message-container">
    <legend>Output</legend>
    <ul class="outer-ul">
      <li ng-repeat="items in messages track by $index">
        <ul class="inner-ul">
          <li ng-repeat="item in items track by $index">{{item}}</li>
        </ul>
     ...

CSS

.inner-ul {
  list-style: none;
  /* border-style: solid; */
  /* border-width: 1px; */
  background: #ccc;
  border-radius: 5px;
  padding: 25px;
  width: 500px;
  margin: 10px;
  margin-left: 0;
}

fieldset {
  background: rgba(0, 0, 0, .1);
  border: none;
  border-radius: 5px;
}

.outer-ul {
  list-style: none;
  padding: 0;
}

.message-container {
  height: 200px;
  background: #eee;
  overflow-y: auto;
  margin: 10px;
}

JavaScript

angular.module("demo", [])
  .run(function($rootScope) {
    $rootScope.messages = [];
    $rootScope.clearMessages = function() {
      $rootScope.messages = [];
    }

    $rootScope.rootClickHandler = function(messageID, message) {
      $rootScope.messages.push([]);
      $rootScope[messageID](messageID, message);
    }

    $rootScope.$on("$emit", function(event, message) {
      $rootScope.messages[$rootScope.messages.length - 1].push(message + ", caught by root scope.");
    })
    $rootScope.$on("$broadcast", function(event, message) {
      $rootScope.messages[$rootScope.messages.length - 1].push(message + ", caught by root scope.");
    })
  })
  .controller("outermostcntrlr", function($scope, $rootScope) {
    $scope.outerClickHandler = function(messageID, message) {
      $rootScope.messages.push([]);
      $scope[messageID](messageID, message);
    }

    $scope.$on("$emit", function(event, message) {
      $rootScope.messages[$rootScope.messages.length - 1].push(message + ", caught by outer scope.");
    })
    $scope.$on("$broadcast", function(event, message) {
      $rootScope.messages[$rootScope.messages.length - 1].push(message + ", caught by outer scope.");
    })
  })
  .controller("middlecntrlr", function($scope, $rootScope) {
    $scope.middleClickHandler = function(messageID, message) {
      $rootScope.messages.push([]);
      $scope[messageID](messageID, message);
    }

    $scope.$on("$emit", function(event, message) {
      $rootScope.messages[$rootScope.messages.length - 1].push(message + ", caught by middle scope.");
    })
    $scope.$on("$broadcast", function(event, message) {
      $rootScope.messages[$rootScope.messages.length - 1].push(message + ", caught by middle scope.");
    })
  })
  .controller("innermostcntrlr", function($scope, $rootScope) {
    $scope.innerClickHandler = function(messageID, message) {
      $rootScope.messages.push([]);
      $scope[messageID](messageID, message);
    }

    $scope.$on("$emit",...