watching ng-include events?

Question

can someone give me an example of how to watch for the emit events on ng-include? to be precise I want to watch for the $includeContentLoaded event in my directive... here's my html:

<div class="page_container">
  <div ng-include="menu" class=""></div>
<section>
        <about  ng-click="loadpantone()">

        </about>
        <div class="pantone_wrapper">
            <div ng-include="template" tabindex="0" id="focus_force" ng-keydown="keypress($event.keyCode)" ng-class="PrevNext"  class="pantoneani remo pantonebg blue" ></div>
        </div>
</section>
<section class="right_side"><p>Build a Web doctor</p></section>
</div>

directive:

'use strict';
/*global $:false */
angular.module('bawdApp')
  .directive('about', function () {
    return {
      templateUrl: 'views/pantone-inner.html',
      restrict: 'AE',
      link: function postLink($scope, element, $emit) {
                function border(valueWidth){
                  $('.page_cont_wrap').css('border', valueWidth+'px solid #aaFFFF');
                }
        $(element).css({'position': 'absolute'}).delay(200).animate({
                    'margin-left': '-160px',
                    'margin-top': '-233px',
                    'left': '50%',
                    'top': '50%'
                }, 200);
                $scope.loadpantone = function loadpantone(){
                    border(0);
                    $scope.template = $scope.pantonesAbout[0].url;
                    $('.top_left_logo.white  img').css('position', 'fixed');
                };
                $scope.$watch('$includeContentLoaded', function(){
                    $('').focus();
                });
      }
    };
  });

controller:

'use strict';
angular.module('bawdApp')
  .controller('AboutCtrl', function ($scope) {
  $scope.pantonesAbout = [
            {name:'Pantone intro', url:'views/pantone_about.html'},
            {name:'Pantone one', url:'views/about_patone_one.html'},
            {name:'Pantone two', url:'views/about_patone_two.html'},
            {name:'Pantone three', url:'views/about_patone_three.html'},
            {name:'Pantone four', url:'views/about_patone_four.html'},
            {name:'Pantone five', url:'views/about_patone_five.html'},

        ];
  $scope.pantoneconter = 0;
});

Answer 1

The events you are looking for are emitted. That means you have to listen by $on:

$scope.$on('$includeContentLoaded', function(){
    console.log(arguments);
});