AngularJS Example

by darthdeus

HTML

<div ng-app="" ng-controller="SiblingController">
  <div ng-controller="EventController">
    Root scope <tt>MyEvent</tt> count: {{count}}
    <button ng-click="$emit('up')">emit up and then down</button>
    <button ng-click="$broadcast('MyEvent')">broadcast</button>
  </div>

    
  <div ng-controller="EventController">
    sibling scope <tt>MyEvent</tt> count: {{count}}
    <button ng-click="$emit('MyEvent')">emit</button>
    <button ng-click="$broadcast('MyEvent')">broadcast</button>
  </div>

</div>

JavaScript

function EventController($scope) {
  $scope.count = 0;
  $scope.$on('MyEvent', function() {
    $scope.count++;
  });
}

function SiblingController($scope) {
  $scope.$on('up', function() {
    $scope.$broadcast('MyEvent');            
  });
}