Chapter 5: Configuring and using AngularJS events

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<div ng-app="myApp">
    <my-listener local="outer">
        <button ng-click="sendDown()">Send Down</button>
        <my-listener local="middle">
            <my-listener local="first inner"></my-listener>
            <my-listener local="second inner"></my-listener>
        </my-listener>
    </my-listener>
</div>

JavaScript

angular.module('myApp', [])
.directive('myListener', function($log) {
    return {
        restrict: 'E',
        // each directive should be given its own scope
        scope: true,
        link: function(scope, el, attrs) {
            // method to generate event
            scope.sendDown = function() {
                scope.$broadcast('myEvent', {origin: attrs.local});
            };
            // method to listen for event
            scope.$on('myEvent', function(event, data) {
                $log.log(
                    event.name + 
                    ' observed in ' + 
                    attrs.local + 
                    ', originated from ' + 
                    data.origin
                );
            }); 
        }
    };
});