Owl carousel populated my multiple ng-repeats

Question

I am trying to init an owl-carousel that is using two ng-repeats to populate it. One containing video urls and the other images.

<div class="col-xs-6 col-sm-6 col-md-7 full-screen" ng-if="showCarousel">
  <owl-carousel
     id="owl-carousel-{{prefix}}-{{item.id}}"
     class="owl-carousel"
     data-options="{responsive: true,
                   mouseDrag: false,
                   lazyLoad: true,
                   video: true,
                   items: 4,
                   itemsDesktop: [1199, 3],
                   itemsDesktopSmall: [992,2],
                   itemsMobile: [479,1]}">
    <div ng-repeat="video in item.videos track by $index"
         class="cover-image">
      <iframe class="lazyOwl embed-video"
        src="{{item.video_url(video.url)}}" frameborder="0">
      </iframe>
    </div>
    <div ng-repeat="image in item.images track by $index" class="pointer cover-image"
         ng-click="toggleAuction(item)" owl-carousel-item>
      <img class="lazyOwl" owl-data-src="{{is_mobile_device() ? image.small_url : image.web_small_url}}"></img>
    </div>
  </owl-carousel>
</div>


.directive("owlCarousel", function() {
return {
  restrict: 'E',
  transclude: false,
  link: function(scope, element, attrs) {
    scope.initCarousel = function() {
      // provide any default options you want
      var defaultOptions = {
        autoPlay: false,
        pagination: false,
        slideSpeed: 250,
        transitionStyle: 'fade',
        navigation: true,
        responsiveRefreshRate: 0,
        navigationText: ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>']
      };

      var customOptions = scope.$eval($(element).attr('data-options'));
      // combine the two options objects
      for (var key in customOptions) {
        if(customOptions.hasOwnProperty(key)){
          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();
        }
      }
    };
  }])

The carousel is initiating correctly but when I go to shrink the screen down the videos are not there and only the images.

I added the owl-carousel-item directive only to the last ng-repeat because I want it to init after the images are done. But I think this means that when I shrink the screen and it is responsive that the videos are technically not part of the carousel.

The problem I am facing is that I have to use 2 ng-repeats since I have two different data sets that I am using to populate the carousel and the way that it usually works is with only one ng-repeat.