AngularJS scope Example

by Guddu Kumar

HTML

<div ng-app="">
  <div ng-controller="EventController">
    Root scope <tt>MyEvent</tt> count: {{count}}
    <ul>
      <li ng-repeat="i in [1]" ng-controller="EventController">
        <button ng-click="$emit('MyEvent')">$emit('MyEvent')</button>
        <button ng-click="$broadcast('MyEvent')">$broadcast('MyEvent')</button>
        <br>
        Middle scope <tt>MyEvent</tt> count: {{count}}
        <ul>
          <li ng-repeat="item in [1, 2]" ng-controller="EventController">
             - Leaf scope <tt>MyEvent</tt> count: {{count}}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>
<style>
.ng-scope { border: 1px dotted red;}

JavaScript

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