fire directive after ng-repeat is finished

Question

I am using owl carousel,for which data is coming from a ajax call. after ajax ng-repeat with populated the html content.

So i want to fire the directive which makes the owl carousel, after this all is done. How to do that.

One way i can think of using onFinishedRender directive, but this is not working.

directive :

directives.directive('onFinishRender',['$timeout', '$parse', function ($timeout, $parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit('ngRepeatFinished');
                    if(!!attr.onFinishRender){
                      $parse(attr.onFinishRender);
                    }
                });
            }
        }
    }
}]);

controller:-

pastWorkService.getAllPastWork()
    .success(function(data) {

        var len = data.length;
        $scope.pastWorkData1 = data.slice(0, len/2);
        $scope.pastWorkData2 = data.slice(len/2, len - 1);
        $scope.owlCarouselPastWork1 = function(){
            $('.owl-carousel2').owlCarousel({
                items: 4,
                loop:true,
                slideSpeed : 1000,
                autoPlay: 3000,
                itemsDesktop: [1199, 4],
                itemsDesktopSmall: [980, 3],
                itemsTablet: [768, 3],
                itemsTabletSmall: false,
                itemsMobile: [479, 1],
                navigation: false
            });
        };
        $scope.owlCarouselPastWork = function(){
            $('.owl-carousel1').owlCarousel({
                items: 4,
                loop:true,
                slideSpeed : 1000,
                autoPlay: 3000,
                itemsDesktop: [1199, 4],
                itemsDesktopSmall: [980, 3],
                itemsTablet: [768, 3],
                itemsTabletSmall: false,
                itemsMobile: [479, 1],
                navigation: false
            });
        };
    });

html:-

<div class="owl-carousel1" role="listbox" >
    <div class="item" ng-repeat="p in pastWorkData1" on-finish-render="owlCarouselPastWork1()">
        <img src="{{p.mainImage}}" alt="completed-projects" />
        <div class="panel-footer">{{p.apartmentName}}</div>
    </div>
</div>
<!-- second row goes here as owl carousel can contain 1 row -->
<div class="owl-carousel2" role="listbox" >
    <div class="item" ng-repeat="p in pastWorkData2" on-finish-render="owlCarouselPastWork1()">
        <img src="{{p.mainImage}}" alt="completed-projects" />
        <div class="panel-footer">{{p.apartmentName}}</div>
    </div>
</div> 

Answer 1

Since you simply want to call a function after the last repeated item is rendered, here is one approach you could use:

html

<div class="owl-carousel1" role="listbox" >
    <div class="item" ng-repeat="p in pastWorkData1">
        <img src="{{p.mainImage}}" alt="completed-projects" />
        <div class="panel-footer">{{p.apartmentName}}</div>
        <span ng-if="$last" on-finish-render function-to-call="owlCarouselPastWork()"></span>
    </div>
</div>
<!-- second row goes here as owl carousel can contain 1 row -->
<div class="owl-carousel2" role="listbox" >
    <div class="item" ng-repeat="p in pastWorkData2">
        <img src="{{p.mainImage}}" alt="completed-projects" />
        <div class="panel-footer">{{p.apartmentName}}</div>
        <span ng-if="$last" on-finish-render function-to-call="owlCarouselPastWork1()"></span>
    </div>
</div> 

directive

.directive('onFinishRender', function($timeout) {
    return {
        restrict: 'A',
        scope: {
            functionToCall: '&'
        },
        link: function(scope, elem, attrs) {
            $timeout(function() {
                scope.functionToCall();
            });
        }
    }
})

Here is an extremely simple and contrived example to illustrate this idea. You could probably even rework this to have the function in the directive and you would simply pass the class identifier you want to call it on.