AngularJS - $emit fire before $on - angularjs

Question

I am working with AngularJS framework. I wrote a few directives with and without their own controller and they sometimes include each other.
For every course, I use my own directive to print its informations
<li ng-repeat="course in courses" on-courses-loaded="fetch_subscribed">
<course-info course="course"></course-info>
</li>
The 'on-courses-loaded' attribute is looking for the last element, I wrote it to do things when ng-repeat is over : a few data are prepared and signal is emitted for every function register as $rootScope.$on('courses_available', function() {}) (scope < actual scope)
angular.module('app').directive('onCoursesLoaded', [
'$rootScope', function ($rootScope) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true)
{
element.ready(function() {
// Prepare things, when done return promise and then ->
$rootScope.$broadcast('courses_available');
});
}
}
}
}]);
In course info directive, there is a call to another directive
<subscribe code="course.code" triggered="true"></subscribe>
With this code
<div ng-show="available">
<button type="button" class="btn btn-success" ng-hide="subscribed" ng-click="subscribe()">
<span class="glyphicon glyphicon-ok"></span> Subscribe
</button>
<button type="button" class="btn btn-danger" ng-show="subscribed" ng-click="unsubscribe()">
<span class="glyphicon glyphicon-remove"></span> Unsubscribe
</button>
</div>
And THIS link function
if (scope.triggered === true)
{
console.log('wait for emit');
$rootScope.$on('courses_available', function() {
internals.getSubscribed();
});
}
else
{
console.log('do not wait for emit');
scope.$watch('code', function(value) {
internals.getSubscribed();
});
}
The biggest issue is that signal is emitted before subscribe directive has set its $rootScope.$on('courses_available', ..)
Here you can find HTML pseudo code expanded
<li class="list-group-item" ng-repeat="course in courses | filter: search" on-courses-loaded="fetch_subscribed">
<!--<course-info course="course"></course-info> IS NEXT DIV-->
<div>
<!--<subscribe code="course.code" triggered="true"></subscribe> IS NEXT DIV-->
<div ng-show="available">
<button type="button" class="btn btn-success" ng-hide="subscribed" ng-click="subscribe()">
<span class="glyphicon glyphicon-ok"></span> Subscribe
</button>
<button type="button" class="btn btn-danger" ng-show="subscribed" ng-click="unsubscribe()">
<span class="glyphicon glyphicon-remove"></span> Unsubscribe
</button>
</div>
</div>
I need to prepare data and emit signal after ng-repeat
While 1., every content from ng-repeat must subscribe to $rootScope.$on() and before emit.
If you have any tips, thank you all.

Answer 1

You can detect finish event of ng-repeat as below
if (scope.$last){
window.alert("im the last!");
}
I have done something like this , so I will post my code here maybe it can help you. First I created custom directive
'use strict';
angular.module('myApp')
.directive('onFinishRender',['$timeout', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit('tilesCreated');
});
}
}
}
}]);
Then used this directive with ng-repeat
<div on-finish-render="" ng-repeat="tile in tiles" ></div>
Then I listen for this event inside another directive
scope.$on('tilesCreated', function() {
// Do something here
});
P.S. Notice that in here I do all things on the same scope. But it depends on you if you want you can broadcast events on $rootScope. I just wanted to give you base idea of how to do this. I hope it will help.