title: Applying angularjs ng-repeat to owl-carousel
body: <pre><code>&lt;div class="owl-carousel"&gt;
      &lt;div ng-repeat="items in itemlist"&gt; 
          &lt;a href="series.html"&gt;&lt;img ng-src="{{items.imageUrl}}" /&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt; 
        &lt;a href="series.html"&gt;&lt;img src="http://placehold.it/350x150" /&gt;&lt;/a&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>View carousel here: <a href="http://www.owlcarousel.owlgraphic.com/">Owl-carousel2</a></p>
  
  <p>I'm running into an issue where whenever the ng-repeat directive is applied to carousel the items are stacked vertically instead of being layout horizontally.</p>
  
  <p>If I leave out ng-repeat and use static items then it works as it should.</p>
  
  <p>Is there a directive I can write and apply to owl-carousel to maintain the layout?</p>
  
  <p>Also what is about ng-repeat that is causing the carousel to break? </p>
  
  <p>Is angular somehow stripping the owl-carousel classes applied to the carousel?</p>
  
  <p>Note* If build the list manually then iterate through and append the elements using :</p>
  
  <pre><code>var div = document.createElement('div');
  var anchor = document.createElement('a');
  var img = document.createElement('img');            
  .....       
  carousel.appendChild(div);
  </code></pre>
  
  <p>then call the owl.owlCarousel({..}) It works, not sure if this is the best work around because ng-repeat makes everything bit easier.</p>
  
  <p>I discovered a hack , if I wrap the owl init in a timeout then ng-repat works.</p>
  
  <pre><code>setTimeout(function(){
        ...call owl init now  
  },1000);
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;link rel="stylesheet" href="css/owl.carousel.css"/&gt;
  &lt;link rel="stylesheet" href="css/owl.theme.default.min.css"/&gt;
  
  .....
      &lt;script src="/js/lib/owl.carousel.min.js"&gt;&lt;/script&gt; 
          &lt;script&gt;
               $(document).ready(function() {
                 var owl = $('.owl-carousel');
                 owl.owlCarousel({
                   .....
                 });
                 owl.on('mousewheel', '.owl-stage', function(e) {
                   if (e.deltaY &gt; 0) {
                     owl.trigger('next.owl');
                   } else {
                     owl.trigger('prev.owl');
                   }
                   e.preventDefault();
                 });
               })
  
          &lt;/script&gt;
  </code></pre>