slack responsive carousel with angularjs - angularjs

Question

I'm using slack responsive carousel to show items this items comes from array $ctrl.items and I'm using ng-repeat inside this slack carousel till now It works fine
the problem is when I click on a any button which changes the items inside $ctrl.items array
slack starts to view the items vertically and if i changed the screen width to smaller or larger screen the problem disappears and the slider works fine again
<slick
dots="true"
infinite="false"
speed="300"
slides-to-show="3"
slides-to-scroll="3"
responsive="[{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
}]"
>
<div ng-repeat="item in $ctrl.items">
<div class="thumbnail">
<h6>category</h6>
<h4>{{item.name}}</h4>
<img src="http://placehold.it/300x200/" alt="Slide11" />
<h6>
{{item.price}} €
<i class="fas fa-cart-arrow-down gray"></i>
</h6>
</div>
</div>
</slick>

Answer 1

this solved the problem
For change slide content, you have to set ng-if to destroy and init it
controller:
$scope.number = [{label: 1}, {label: 2}, {label: 3}, {label: 4}, {label: 5}, {label: 6}, {label: 7}, {label: 8}];
$scope.numberLoaded = true;
$scope.numberUpdate = function(){
$scope.numberLoaded = false; // disable slick
//number update
$scope.numberLoaded = true; // enable slick
};