I am working on an AngularJS app. This app constructs a complex table of part information with filtering and sorting, etc. The table gets built using two ngRepeat directives. One of them hits a JSON API to get the column headers, and the other gets all the part data for those columns. Based on the part category, the table could have anywhere from 5 to 50 columns, and there could be between 2 and 2000 parts in the category.

After the table is rendered I need to apply a jQuery plugin to enable additional features. My problem is that the plugin initialization is happening too early. I need to only call that init function when the directives have completed all the rendering.

My first step was to create a directive that sets an event I could listen for. Here is what I used:

```
angular.module('myApp')
.directive('myOnLoad', [function() {
    return function(scope, element, attrs) {
        if (scope.$last) setTimeout(function(){
            scope.$emit('everythingLoaded', element, attrs);
        }, 1);
    };
}]);

```

I then put the directive on one of my repeaters like this:

```
<th ng-repeat="attribute in ctrl.attributes" attribcol="attribute" class="mps-attribute-cell" my-on-load></th>

```

And then listen for it in my controller:

```
$scope.$on('everythingLoaded', function(scope, element, attrs){
    var containerHeight = jQuery(window).height() - 100;
    jQuery('#mps-table').fixedHeaderTable({
            width: '100%',
            height: containerHeight + 'px',
            fixedColumn: true
     });
});

```

This helped me wait til the attribute columns loaded before the plugin init, but it isn't exactly right yet because the other directive may not be done when this fires. I need to make sure both repeaters are done.

How can I require the *combination* of two different events before the init code fires?

**UPDATE**:

I created a service that looks like this so far:

```
angular.module('myApp')
    .factory('featureInit', ['$rootScope',
        function ($rootScope) {
            var featureReady = 0;
            $rootScope.$on('attributesLoaded', function (scope, element, attrs) {
                featureReady++;
                console.log('attributesLoaded so featureReady is now ' + featureReady);
            });
            $rootScope.$on('partsLoaded', function (scope, element, attrs) {
                featureReady++;
                console.log('partsLoaded so featureReady is now ' + featureReady);
            });
            featureInit.init = function() {
                if (featureReady > 1) {
                    console.log('triggers were hit');
                    var containerHeight = jQuery(window).height() - 100;
                    jQuery('#mps-table').fixedHeaderTable({
                        width: '100%',
                        height: containerHeight + 'px',
                        fixedColumn: true
                    });
                }
            };
        }]);

```

I've adjusted the event-emitter directives to produce the correct event when loading is finished and my service correct logs the variable "featureReady". I can see it get logged when it finally gets to "2", at which point I want to run all the code inside the init function.

At this point I am not sure how to get my app to "watch" the featureReady variable so that it will kick off that init function when it hits the right point.