title: AngularJs Jcarousel implementation works only after pageresize
body: <p>I have a kind of weird problem here. I took the for my part most fitting Example of JCarousel (<a href="http://sorgalla.com/jcarousel/examples/responsive/" rel="nofollow">http://sorgalla.com/jcarousel/examples/responsive/</a>) and created a Angular directive out of it.</p>
  
  <p>So far so good, it basically works but I have to trigger one Frame/Window resizeing first, otherwise JS gives me a console error:</p>
  
  <p><em>Uncaught TypeError: Cannot read property 'index' of null - jquery.jcarousel.js:521</em></p>
  
  <p>I've made up a smiplyfied jsfiddle here where you can reproduce the problem. The Carousel will work like a charme once you triggered a resize on the "Result" frame or the whole window:</p>
  
  <p><a href="http://jsfiddle.net/nbtw3cnk/4/" rel="nofollow">http://jsfiddle.net/nbtw3cnk/4/</a></p>
  
  <p>I have absolutely no Idea how to solve this, any suggestions?</p>
  
  <p>Thanks a lot in advance!</p>
  
  <p>John</p>
  
  <h2>JCarousel directive for AngularJs:</h2>
  
  <pre><code>var carousel = function () {
      return {
          restrict: 'A',
          replace: true,
          transclude: false,
          scope: {
              images: "="
          },
          template: '&lt;div class="jcarousel-wrapper"&gt;&lt;div class="jcarousel"&gt;&lt;ul&gt;&lt;li ng-repeat="img in images"&gt;&lt;!--&lt;img ng-src="{{img.imageKey}}" /&gt;--&gt;{{img.imageKey}}&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;a href="#" class="jcarousel-control-prev"&gt;&amp;lsaquo;&lt;/a&gt;&lt;a href="#" class="jcarousel-control-next"&gt;&amp;rsaquo;&lt;/a&gt;&lt;/div&gt;',
          link: function link(scope, element, attrs)
          {
              var jcarousel = $('.jcarousel');
  
              jcarousel.jcarousel({
                      wrap: 'circular'
                  });
  
              $('.jcarousel-control-prev')
                  .jcarouselControl({
                      target: '-=1'
                  });
  
              $('.jcarousel-control-next')
                  .jcarouselControl({
                      target: '+=1'
                  });
          }
      }
  };
  </code></pre>