angular.module('childCallbacks', [])
  .directive('parentDir', function() {
    return {
      restrict: 'EA',
      bindToController: true,
      controller: 'parentCtrl',
      controllerAs: 'parent',
      template: '<div></div>'};
  })
  .directive('childDir', function() {
    return {
      restrict: 'EA',
      scope: {
        callbacks: '='
      },
      bindToController: true,
      controller: 'childCtrl',
      controllerAs: 'child',
      template: '<div></div>'
    };
  })
  .controller('parentCtrl', function() {
    this.callbacks = {};

    this.handleSomeEvent = function() {
      // do some initial handling

      // trigger child handling
      (this.callbacks.handleEvent || angular.noop)();
    };
  })
  .controller('childCtrl', function() {
    this.callbacks.handleEvent = function() {
      // handle event
    };
  });