Incorporating a bootstrap carousel with ng-repeat into my div has been quite the journey. One challenge I've encountered is adding new items to the current list and smoothly transitioning to that newly added item.
For instance, when I am at index 0 and click the add button, I expect to seamlessly slide to the new item in the carousel. However, despite setting the indexes correctly, it doesn't transition to the new item as desired.
$scope.items.splice($scope.currentIndex+1, 0, newItem);
$scope.currentIndex = $scope.currentIndex + 1;
$('#myCarousel').carousel($scope.currentIndex);
Instead of displaying the data from the new item, it still shows the content of item 1 until I manually click next to see the updated item. Even attempting
$('#myCarousel').carousel('next');Edit:
<div id="myCarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item" ng-class="{active:!$index}" ng-repeat="item in items">
// rest of the html
</div>
</div>
</div>