title: How to use slick-slider in angularjs
body: <p>I have slick-slider </p>
  
  <pre><code>    &lt;div class="slider"&gt;
        &lt;div&gt;&lt;img src="img/seasons/spring.jpg" alt=""&gt;&lt;/div&gt;
        &lt;div&gt;&lt;img src="img/seasons/summer.jpg" alt=""&gt;&lt;/div&gt;
        &lt;div&gt;&lt;img src="img/seasons/winter.jpg" alt=""&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>Js</strong></p>
  
  <pre><code> $(document).ready(function () {
          $('.slider').slick({
              dots: true,
              infinite: true,
              speed: 500,
              fade: true,
              cssEase: 'linear',
              autoplay:true,
              adaptiveHeight:true,
  
          });
      });
  </code></pre>
  
  <p>And it works well anywhere,but I need to use this slider in block and it doesn't work here</p>
  
  <pre><code>&lt;div ng-repeat="forecast in forecasts.list" class="forecast"&gt; 
    &lt;p&gt;{{ forecast.dt_txt}}&lt;/p&gt;
    &lt;button ng-click="toggle = !toggle"&gt;Go&lt;/button&gt;
    &lt;div ng-show="toggle"&gt;
      &lt;div class="slider"&gt;
        &lt;div&gt;&lt;img src="img/seasons/spring.jpg" alt=""&gt;&lt;/div&gt;
        &lt;div&gt;&lt;img src="img/seasons/summer.jpg" alt=""&gt;&lt;/div&gt;
        &lt;div&gt;&lt;img src="img/seasons/winter.jpg" alt=""&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>How to fix ?</p>