title: Slick Carousel Angular - dynamic data loading
body: <p>When I use dynamic data to load the slick content, all the images come one below the other. I do not know why it happens. How do I resolve it? Looks like DOM needs data at initialization itself.</p>
  
  <p>View:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;slick infinite=true slides-to-show=3 slides-to-scroll=3 settings="slickConfig" data="images"&gt;
      &lt;div class="slick-item" ng-repeat="image in images"&gt;
          &lt;div class="Slide-Id"&gt;
              &lt;p class="slide-id"&gt;{{images.indexOf(image)+1}}/{{images.length}}&lt;/p&gt;
          &lt;/div&gt;
          &lt;img src="{{image.url}}" height="100px" width="100px" /&gt;
      &lt;/div&gt;
  &lt;/slick&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>// $scope.images = [ {
        //     url: '../../images/qr-code.png'
        //   }, {
        //     url: '../../images/qr-code.png'
        //   }, {
        //     url: '../../images/qr-code.png'
        //   }, {
        //     url: '../../images/qr-code.png'
        //   }, {
        //     url: '../../images/qr-code.png'
        //   }];
     
     //Hard coded values above loads properly as expected. But if it comes from server and then,
     //it loads one below the other.
     
     
     $scope.images = [];
  
          $scope.slickConfig = {
          //enabled: true,
          //autoplay: false,
          //draggable: true,  
         // method: {},
          arrows: false,
          //centerMode:true,
          //variableWidth: true,
          event: {
              beforeChange: function (event, slick, currentSlide, nextSlide) {
              },
              afterChange: function (event, slick, currentSlide, nextSlide) {
              }
          }
        };
     
     ...
      var data = ServiceFactory.getEventDetails();
      data
                   .then(onAuthenticated )
                   .catch(onRejectedRequest)
                   .finally(sessionServiceFinally);
       
       ....
       
       onAuthenticated(resp){
        console.log("vm.tickets[i].images.." + resp[0].images);
         $scope.images.push({url : resp[0].images});
         $scope.images.push({url : resp[0].images});
         $scope.images.push({url : resp[0].images});
       
       }
     </code></pre>
  </div>
  </div>
  </p>