Owl Carousel not identifying elements of ng-repeat

Question

I\'m trying to get owl carousel to work in Angular.

I want to markup like this in my view, since I have many galleries :

Answer 1

Had to make some changes to your directive so it would work with multiple carousels on the same page. Here is a link to a working plnkr

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];
}).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());
            }
        }
    };
}]);

Here is the HTML

  
    
    
    
    
    
    
    
    
    
    
    
    
  

  
    
      

        
{{::item}}
      
    
    
      

        
{{::item}}