title: Slick Carousel with Angular JS
body: <p>I am using <a href="http://kenwheeler.github.io/slick/" rel="noreferrer">Slick</a> carousel in one of my <a href="https://angularjs.org/" rel="noreferrer">AngularJS</a> application. For that I have created directive as follows:</p>
  
  <pre><code>  myApp.directive('slickSlider',function(){
     return {
       restrict: 'A',
       link: function(scope,element,attrs) {
         $(element).slick(scope.$eval(attrs.slickSlider));
     }
    }
   }); 
  </code></pre>
  
  <p>Here is my code in view file:</p>
  
  <pre><code>  &lt;div class="clearfix"  
    slick-slider="{dots: false, arrows: true, draggable: 
    false, slidesToShow:3, infinite:false}"&gt;
                &lt;div class="my-slide"&gt;
                    &lt;a&gt;&lt;img ng-src="assets/img/img1.png"/&gt;&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="my-slide"&gt;
                    &lt;a&gt;&lt;img ng-src="assets/img/img1.png"/&gt;&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="my-slide"&gt;
                    &lt;a&gt;&lt;img ng-src="assets/img/img1.png"/&gt;&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="my-slide"&gt;
                    &lt;a&gt;&lt;img ng-src="assets/img/img1.png"/&gt;&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="my-slide"&gt;
                    &lt;a&gt;&lt;img ng-src="assets/img/img1.png"/&gt;&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="my-slide"&gt;
                    &lt;a&gt;&lt;img ng-src="assets/img/img1.png"/&gt;&lt;/a&gt;
                &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>In this case it is working fine and initializing properly.</p>
  
  <p>But when I creates slides dynamically using <a href="https://docs.angularjs.org/api/ng/directive/ngRepeat" rel="noreferrer">ngRepeat</a>, it is not initializing and shows slides one after the other.</p>
  
  <p>Here is my code using <a href="https://docs.angularjs.org/api/ng/directive/ngRepeat" rel="noreferrer">ngRepeat</a></p>
  
  <pre><code>&lt;div class="clearfix"  
    slick-slider="{dots: false, arrows: true, draggable: 
    false, slidesToShow:3, infinite:false}"&gt;
        &lt;div class="my-slide" ng-repeat="slide in slides"&gt;
           &lt;a&gt;&lt;img ng-src="assets/img/{{slide.img}}"/&gt;&lt;/a&gt;
         &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Any suggestion, how can I resolve it?</p>