I have the following HTML code within my ng-controller div:
<div id="cards-slider">
<div ng-repeat="card in cards">
<a href="#" title="Title" ng-click="toggleFavorite(card)">
<i class="icon-star" ng-class="card.isFavorite ? 'favorite' : ''"></i>
</a>
<div class="card-holder ng-cloak">
<img src="{{ card.imageSrc }}" />
<p><a href="#">{{ card.programName }}</a></p>
</div>
</div>
</div>
<a href="#" class="next ng-cloak" ng-show="cartsTotal > limit && isNotLastPage" ng-click="getNextCards()"></a>
Whenever I click on the "getNextCards" function, it triggers an HTTP request to retrieve more cards. Upon successful retrieval, I aim to initiate a jQuery animation (see code below) and only after its completion update my "cards" model. However, this method doesn't work as expected and the cards remain unchanged. Is there any workaround that you can suggest? Thank you.
$( "#cards-slider" ).animate({
left: "-=500",
}, 100, function() {
$scope.cards = data.elements;
$scope.cartsTotal = data.total;
});