Карусель совы не работает в частичном представлении angularjs

Директива:

/* global angular */
(function() {
    'use strict';

    angular.module('<name>').directive('<nAme>', nxCarousel);

    function nxCarousel() {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                coll: '=',
                baseUrl: '@',
                imgUrl: '@'
            },
            templateUrl: 'nx-carousel.html',
            link: function(scope, element, attrs) {
                var cntNgRepeat = 2;
                var current = 0;

                scope.$on('ngRepeatFinished', function() {
                    current++;
                    if (current < cntNgRepeat) {
                        return;
                    }
                    current = 0;

                    element.carousel({
                        interval: 4000
                    });

                    var clickEvent = false;
                    element.on('click', '.nav a', function() {
                        clickEvent = true;
                        element.find('.nav li').removeClass('active');
                        $(this).parent().addClass('active');
                    });
                    element.on('slid.bs.carousel', function(e) {
                        if (!clickEvent) {
                            var count = element.find('.nav').children().length - 1;
                            var current = element.find('.nav li.active');
                            current.removeClass('active').next().addClass('active');
                            var id = parseInt(current.data('slide-to'));
                            if (count == id) {
                                element.find('.nav li').first().addClass('active');
                            }
                        }
                        clickEvent = false;
                    });
                });
            }
        };
    }
})();

Шаблон:

<div id="carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item" ng-repeat="item in coll" ng-class="{active: $index==0}" nx-on-finish-render="ngRepeatFinished">
            <a href="{{baseUrl}}{{item.slug}}" class="column-post-img">
                <img ng-src="{{imgUrl}}{{item.image}}" class="img-responsive post-img" alt="{{item.title}}" ng-if="item.image">
                <img src="/imgs/950X350.jpg" class="img-responsive post-img" alt="{{item.title}}" ng-if="!item.image">
                <div class="carousel-caption">
                    <h3>{{item.title | limitTo:100}}</h3>
                    <p>{{item.summary | limitTo: 100}}</p>
                </div>
            </a>
        </div>
    </div>
    <ul class="nav carousel nav-pills nav-justified">
        <li data-target="#carousel" data-slide-to="{{$index}}" ng-repeat="item in coll" ng-class="{active: $index==0}" nx-on-finish-render="ngRepeatFinished"><a data-target="#">{{item.title | limitTo:100}}</a></li>
    </ul>
</div>

Наконец-то заработало, создав directive:

Вот директива:

app.directive('wrapOwlcarousel', function () {

    var link = function (scope, element, attr) {

        // Loads owl carousel with default settings, unless otherwise requested in parameters
        var carousel = function () {
            element.owlCarousel({
                // Most important owl features
                items: attr.owlItems ? attr.owlItems : 5,
                itemsCustom: attr.owlItemscustom ? (attr.owlItemscustom.toLowerCase() == 'true') : false,
                itemsDesktop: [1199, attr.owlItemsdesktop ? attr.owlItemsdesktop : 4],
                itemsDesktopSmall: [980, attr.owlItemsdesktopsmall ? attr.owlItemsdesktopsmall : 3],
                itemsTablet: [768, attr.owlItemstablet ? attr.owlItemstablet : 2],
                itemsTabletSmall: attr.owlItemstabletsmall ? (attr.owlItemstabletsmall.toLowerCase() == 'true') : false,
                itemsMobile: [479, attr.owlItemsmobile ? attr.owlItemsmobile : 1],
                singleItem: attr.owlSingleitem ? (attr.owlSingleitem.toLowerCase() == 'true') : false,
                itemsScaleUp: attr.owlItemsscaleup ? (attr.owlItemsscaleup.toLowerCase() == 'true') : false,

                //Basic Speeds
                slideSpeed: attr.owlSlidespeed ? attr.owlSlidespeed : 200,
                paginationSpeed: attr.owlPaginationspeed ? attr.owlPaginationspeed : 800,
                rewindSpeed: attr.owlRewindspeed ? attr.owlRewindspeed : 1000,

                //Autoplay
                autoPlay: attr.owlAutoplay ? (attr.owlAutoplay.toLowerCase() == 'true') : false,
                stopOnHover: attr.owlStoponhover ? (attr.owlStoponhover.toLowerCase() == 'true') : false,

                // Navigation
                navigation: attr.owlNavigation ? (attr.owlNavigation.toLowerCase() == 'true') : false,
                navigationText: [attr.owlNavigationtextprev ? attr.owlNavigationtextprev : "prev",
                        attr.owlNavigationtextnext ? attr.owlNavigationtextnext : "next"],
                rewindNav: attr.owlRewindnav ? (attr.owlRewindnav.toLowerCase() == 'true') : true,
                scrollPerPage: attr.owlScrollperpage ? (attr.owlScrollperpage.toLowerCase() == 'true') : false,

                //Pagination
                pagination: attr.owlPagination ? (attr.owlPagination.toLowerCase() == 'true') : true,
                paginationNumbers: attr.owlPaginationnumbers ? (attr.owlPaginationnumbers.toLowerCase() == 'true') : false,

                // Responsive
                responsive: attr.owlResponsive ? (attr.owlResponsive.toLowerCase() == 'true') : true,
                responsiverefreshrate: attr.owlResponsiverefreshrate ? attr.owlResponsiverefreshrate : 200,
                responsivebasewidth: attr.owlResponsivebasewidth ? attr.owlResponsivebasewidth : window,

                // CSS Styles
                baseClass: attr.owlBaseclass ? attr.owlBaseclass : "owl-carousel",
                theme: attr.owlTheme ? attr.owlTheme : "owl-theme",

                //Lazy load
                lazyLoad: attr.owlLazyload ? (attr.owlLazyload.toLowerCase() == 'true') : false,
                lazyFollow: attr.owlLazyfollow ? (attr.owlLazyfollow.toLowerCase() == 'true') : true,
                lazyEffect: attr.owlLazyeffect ? attr.owlLazyeffect : "fade",

                //Auto height
                autoHeight: attr.owlAutoheight ? (attr.owlAutoheight.toLowerCase() == 'true') : false,

                //JSON
                jsonPath: attr.owlJsonpath ? (attr.owlJsonpath.toLowerCase() == 'true') : false,
                jsonSuccess: attr.owlJsonsuccess ? (attr.owlJsonsuccess.toLowerCase() == 'true') : false,

                //Mouse Events
                dragBeforeAnimFinish: attr.owlDragbeforeanimfinish ? (attr.owlDragbeforeanimfinish.toLowerCase() == 'true') : true,
                mouseDrag: attr.owlMousedrag ? (attr.owlMousedrag.toLowerCase() == 'true') : true,
                touchDrag: attr.owlTouchdrag ? (attr.owlTouchdrag.toLowerCase() == 'true') : true,

                //Transitions
                transitionStyle: attr.owlTransitionstyle ? (attr.owlTransitionstyle.toLowerCase() == 'true') : false,

                // Other
                addClassActive: attr.owlAddclassactive ? (attr.owlAddclassactive.toLowerCase() == 'true') : false,

                //Callbacks
                beforeUpdate: attr.owlBeforeupdate ? (attr.owlBeforeupdate.toLowerCase() == 'true') : false,
                afterUpdate: attr.owlAfterupdate ? (attr.owlAfterupdate.toLowerCase() == 'true') : false,
                beforeInit: attr.owlBeforeinit ? (attr.owlBeforeinit.toLowerCase() == 'true') : false,
                afterInit: attr.owlAfterinit ? (attr.owlAfterinit.toLowerCase() == 'true') : false,
                beforeMove: attr.owlBeforemove ? (attr.owlBeforemove.toLowerCase() == 'true') : false,
                afterMove: attr.owlAftermove ? (attr.owlAftermove.toLowerCase() == 'true') : false,
                afterAction: attr.owlAfteraction ? (attr.owlAfteraction.toLowerCase() == 'true') : false,
                startDragging: attr.owlStartdragging ? (attr.owlStartdragging.toLowerCase() == 'true') : false,
                afterLazyLoad: attr.owlAfterlazyload ? (attr.owlAfterlazyload.toLowerCase() == 'true') : false
            });
        }

        // Use carousel's id to bind control buttons to specific carousel (Multiple carousel support)
        // Otherwise, use owl-carousel as default.
        // Any element with given class will trigger control on click.
        //  '.owlcarousel-next' - Scrolls left
        //  '.owlcarousel-prev' - Scrolls right
        //  '.owlcarousel-play' - Starts autoplay
        //  '.owlcarousel-stop' = Stops autoplay
        var uniqueId = attr.id ? attr.id : 'owl-carousel';
        var actions = function () {
            angular.element("#nextItem").click(function () {
                element.trigger('owl.next');
            })
            angular.element("#prevItem").click(function () {
                element.trigger('owl.prev');
            })

        }

        // Watch items in carousel to reload when items are added/removed.
        scope.$watch(uniqueId + "-items", function (value) {
            carousel(element);
        })

        // Load the triggers for carousel controls.
        actions();
    }

    return {
        restrict: 'E',
        link: link
    }

});

HTML-код:

<div class="inner-box relative">
                    <h2 class="title-2">
                        Featured Listings
                        <a id="nextItem" class="link  pull-right carousel-nav"> <i class="icon-right-open-big"></i></a>
                        <a id="prevItem" class="link pull-right carousel-nav"> <i class="icon-left-open-big"></i> </a>
                    </h2>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="no-margin item-carousel owl-carousel owl-theme">
                                <wrap-owlcarousel class="owl-carousel"
                                                  data-options="{autoPlay: 5000, stopOnHover: true, slideSpeed : 300, paginationSpeed : 400}">
                                    <div class="item">
                                        <a href="ads-details.html">
                                            <span class="item-carousel-thumb">
                                                <img class="img-responsive" src="../images/item/tp/Image00011.jpg" alt="img">
                                            </span>
                                            <span class="item-name"> Lorem ipsum dolor sit amet </span>
                                            <span class="price"> $ 260 </span>
                                        </a>
                                    </div>
                                    <div class="item">
                                        <a href="ads-details.html">
                                            <span class="item-carousel-thumb"> <img class="item-img" src="../../images/item/tp/Image00013.jpg" alt="img"> </span><span class="item-name"> feugiat nulla facilisis </span> <span class="price"> $ 140 </span>
                                        </a>
                                    </div>
                                    <div class="item">
                                        <a href="ads-details.html">
                                            <span class="item-carousel-thumb"> <img class="item-img" src="../../images/item/FreeGreatPicture.com-46404-google-drops-nexus-4-by-100-offers-15-day-price-protection-refund.jpg" alt="img"> </span> <span class="item-name"> praesent luptatum zzril </span> <span class="price"> $ 220 </span>
                                        </a>
                                    </div>
                                    <div class="item">
                                        <a href="ads-details.html">
                                            <span class="item-carousel-thumb"> <img class="item-img" src="../../images/item/FreeGreatPicture.com-46405-google-drops-price-of-nexus-4-smartphone.jpg" alt="img"> </span> <span class="item-name"> delenit augue duis dolore </span> <span class="price"> $ 120 </span>
                                        </a>
                                    </div>
                                    <div class="item">
                                        <a href="ads-details.html">
                                            <span class="item-carousel-thumb"> <img class="item-img" src="../../images/item/FreeGreatPicture.com-46407-nexus-4-starts-at-199.jpg" alt="img"> </span> <span class="item-name"> te feugait nulla facilisi </span> <span class="price"> $ 251 </span>
                                        </a>
                                    </div>
                                </wrap-owlcarousel>
                            </div>
                        </div>
                    </div>
                </div>