How to integrate Owl carousel with AngularJs (Dynamic content)

dynamic-Owl-carousel-with-AngularJs.html

index.html
---------------------------------------------------------------------------------------------------------------------------
    <link href="public/assets/owl_carousel/owl.carousel.css" rel="stylesheet">
    <link href="public/assets/owl_carousel/owl.theme.css" rel="stylesheet">
    <script src="public/assets/owl_carousel/owl.carousel.min.js"></script>

    <data-owl-carousel class="owl-carousel" data-options="owlOptionsTestimonials">
      <div owl-carousel-item="" ng-repeat="item in fbAlbumImages" class="item">
        <img ng-src="{{item.source}}" alt="image" width="250">
      </div>
    </data-owl-carousel>
    
app.js
---------------------------------------------------------------------------------------------------------------------------
app.controller('homeCtrl', ['$scope', 'appServ', 'toastr', '$routeParams', '$location', '$filter',

    function($scope, appServ, toastr, $routeParams, $location, $filter) {
        $scope.owlOptionsTestimonials = {
            autoPlay: 4000,
            stopOnHover: true,
            slideSpeed: 300,
            paginationSpeed: 600,
            items: 2
        }
    }
]);

app.directive("owlCarousel", function() {
    return {
        restrict: 'E',
        transclude: false,
        link: function(scope) {
            scope.initCarousel = function(element) {
                console.log('initCarousel');

                // provide any default options you want
                var defaultOptions = {};
                var customOptions = scope.$eval($(element).attr('data-options'));
                // combine the two options objects
                for (var key in customOptions) {
                    defaultOptions[key] = customOptions[key];
                }
                // init carousel
                var curOwl = $(element).data('owlCarousel');
                if (!angular.isDefined(curOwl)) {
                    $(element).owlCarousel(defaultOptions);
                }
                scope.cnt++;
            };
        }
    };
}).directive('owlCarouselItem', [
    function() {
        return {
            restrict: 'A',
            transclude: false,
            link: function(scope, element) {
                // wait for the last item in the ng-repeat then call init
                if (scope.$last) {
                    console.log('lst element');
                    scope.initCarousel(element.parent());
                }
            }
        };
    }
]);

Hello, these seems not to work for me when loading as a template after routing

this code not work if page not reload

It works with my code