owl-Carousel 2 is loaded several times and then the data load in the slider is slow

I'm working an app with angular, I'm using owl-carousel and I'm using the directive of owlcarousel that allows you to initialize the slider once the last data with ng-repeat is loaded.

app.directive("owlCarousel", function() {
    return {
        restrict: 'E',
        transclude: false,
        link: function (scope) {
            scope.initCarousel = function(element) {
                   **console.log(element);**
                // 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
                $(element).owlCarousel(defaultOptions);
            };

        	// Let lissen for events.
        }
    };
});


app.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) {
            scope.initCarousel(element.parent());
        }
    }
};
}]);

I have placed the output on the console black so they can understand me. in the dialogue window I have specified a template to load the slider, once the information is loaded, the console.log goes out indefinitely, but after three clicks I do to display the slider in the md-dialog, 3 lines appear in the console.log of the element and so on until it is loaded more than 30 times and I can not find a way to reset or cause the owlcarousel that is inside this directive to start as new every time I start the dialog window. because each time access to the is consuming as memory and the load becomes slower.

So I call the slider

$mdDialog.show({
  controller: SliderController,
  scope: $scope,
  preserveScope: true,
  //templateUrl: 'Slider.tmpl.html',
  template: "<md-dialog-content id="contenido" ng-style="{'height': iframeHeight + 'px','max-height': iframeHeight + 'px',  'max-width': iframeWidth + 'px', 'width': iframeWidth + 'px'}">
        <owl-carousel id='owl-product-catalog' class="owl-carousel owl-theme" data-options="{items:1, dots:false, center:true, loop:false, margin:0, singleItem:true, navigation:true}">
            <div owl-carousel-item="catalogoid"  ng-repeat="catalogoid in todoelcatalogo" ng-cloak>
              <img ng-image-appear ng-pinch-zoom ng-style="{height: iframeHeight + 'px', 'max-height': iframeHeight + 'px', 'max-width': iframeWidth + 'px', width: iframeWidth + 'px'}" ng-src='{{catalogoid.file}}' />
            </div>
        </owl-carousel>
</md-dialog-content>'",
  parent: angular.element(document.body),
  targetEvent: ev,
  clickOutsideToClose:true,
  bindToController:true,
  fullscreen: $scope.customFullscreen,
      locals: {var1: data, var2: dataimg} })
  .then(function(answer) {
  $scope.status = 'Aceptado';
}, function() {
  $scope.status = 'Cancelado';
});
};

and this is part of the temate code

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<md-dialog-content id="contenido" ng-style="{'height': iframeHeight + 'px','max-height': iframeHeight + 'px',  'max-width': iframeWidth + 'px', 'width': iframeWidth + 'px'}">
            <owl-carousel id='owl-product-catalog' class="owl-carousel owl-theme" data-options="{items:1, dots:false, center:true, loop:false, margin:0, singleItem:true, navigation:true}">
                <div owl-carousel-item="catalogoid"  ng-repeat="catalogoid in todoelcatalogo" ng-cloak>
                  <img ng-image-appear ng-pinch-zoom ng-style="{height: iframeHeight + 'px', 'max-height': iframeHeight + 'px', 'max-width': iframeWidth + 'px', width: iframeWidth + 'px'}" ng-src="{{catalogoid.file}}" />
                </div>
            </owl-carousel>
</md-dialog-content>

I want to apologize to Alejandro and the whole community, is that I can not explain who knows the best way, but in reality what I want to know is how to remove the owl-carousel plugin after using it or that the mddialog has been destroyed. Here is an example of what happens, when I load the $ mdiadialog, the OWL plugin is activated. this when I do debug I can see it initialized like this:

**jQuery.fn.init [owl-carousel, prevObject: jQuery.fn.init(1)]
   0:owl-carousel
   length:1
   prevObject:jQuery.fn.init [document]
   __proto__:Object(0)**

ok now I send a destroy event and some other functions to destroy it and I do this:

    **$('.owl-carousel').data('owl.carousel').destroy();
    $('.owl-stage-outer').remove();
    $('.md-dialog-container').remove();
    owl.html(owl.find('.owl-stage-outer').html()).removeClass('owl-loaded');
    owl.html(owl.find('.owl-stage-outer').html()).removeClass('owl-drag');
    owl.html(owl.find('.owl-stage-outer').html()).removeClass('owl-theme');
    owl.html(owl.find('.owl-stage-outer').html()).removeClass('owl-carousel');
    owl.html(owl.find('.owl-stage-outer').html()).removeClass('owl-carousel');
    owl.find('.owl-stage-outer').children().unwrap();
    owl.wrapAll('owl-carousel');
    owl.wrapAll('.__proto__');
    owl.remove();**

But my surprise is that the init function of the OWL jquery can not be removed or deleted from memory and then it stays like this:

**jQuery.fn.init {}
    __proto__: Object(0)**

Now if my question goes: How do I destroy "jQuery.fn.init {}" I have tried several options delete, remove, wrapAll but do not delete it point to owl.fn.init.remove () and nothing.

I think that in this way it is easier for them to understand me and help me.