ng-repeat for carousel: data not updated or refreshed

Question

Iam not getting slick carousel with updated data when i update this ng-repeat data of slider from my controller.

<slick lazyLoad=ondemand init-onload=true slides-to-show=5 slides-to-scroll=1 next-arrow=".rightOne" prev-arrow=".leftOne" data="trailersUpcomming">
  <div index="$index " ng-repeat="trailer in trailersUpcomming ">
      <div class=" boxhover testimonialslider" style="margin-right: 12px; ">
          <div class="card " style="border-color: green; ">
              <div style="padding: 17px;text-align: left;height: 124px;background-color: #ffffff;">
                  <div>ReleaseDate : {{trailer.releasedate}}</div>
                  <div>Language : {{trailer.filmlanguage}}</div>
                  <div>Rating : {{trailer.filmrating}}</div>
              </div>
          </div>
      </div>
  </div>
</slick>

Answer 1

Try to update your array scope by using angular.copy

for reference please refer this example angular slick update example

Answer 2

The place there you are updating your data just use

$timeout(function(){
 //update your variable here.
}

Answer 3

I had faced similar issue. Using angular's old version i.e. 1.4 and using slider carousel. On refresh/page reload carousel was not getting refreshed with latest data.

$('.slider').slick('reinit'); or $('.slider').slick('refresh'); 
did not work me so I had to play with data coming from server into angular client.

Did fix that with no so great solution but it worked for me. What I observed is that, the array which is used to iterate and display elements in it on the carousel do not work if its reference changes on page reload. If you directly do not assign data array to the target array whose elements are being shown on Carousel then it works.

For that, I am using array's Push() method

for (let i=0; i < data.length ; i++) {
   var id = vm.targetArray.length + 1;
   if ( vm.targetArray.filter(item=> item.name == data[i].name).length == 0){
      vm.targetArray.push(data[i]);
      console.log("Pushed the item to targetArray : " + data[i].name);
   } 
}