Angular Owl carousel with loop clones items out of scope
<p>I have a directive which render a owl carousel with <code>loop</code> option set to <code>true</code>. Each item in the carousel is linked to a <code>ng-click</code> event. However, as <code>loop</code> option is <code>true</code>, carousel clones each item into the carousel to give a loop ilusion. These cloned items are not attached to the controller scope.</p>

<p>This is what I'm using</p>

<p><strong>js</strong></p>

<pre><code>var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.items1 = [1,2,3,4,5];
  $scope.items2 = [1,2,3,4,5,6,7,8,9,10];
  $scope.a = function(i){
    alert(i);
  }
}).directive("owlCarousel", function() {
    return {
        restrict: 'E',
        transclude: false,
        link: function (scope) {
            scope.initCarousel = function(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);
            };
        }
    };
})
.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());
            }
        }
    };
}]);
</code></pre>

<p><strong>html</strong></p>

<pre><code>&lt;body ng-controller="MainCtrl"&gt;
    &lt;data-owl-carousel class="owl-carousel" data-options="{loop:true}"&gt;
      &lt;div owl-carousel-item="" ng-repeat="item in ::items1" class="item"&gt;
        &lt;a ng-click="a($index)"&gt;{{::item}}&lt;/a&gt;
      &lt;/div&gt;
    &lt;/data-owl-carousel&gt;
  &lt;/body&gt;
</code></pre>

<p>This is a <a href="http://plnkr.co/edit/DZ0Q6sRTkP2oeOSq1kAx?p=preview" rel="nofollow">plunker</a> with the code</p>

<p><strong>How could I re-render or link scope to the new cloned items?</strong></p>