Utilizing AngularJS within the framework of my Bootstrap carousel has presented a challenge. When I implement the directive ng-repeat="album in ActiveSinger.albums" to loop through my array, it continuously adds the class "active" to each div element. This creates an issue with my Bootstrap carousel as the "active" class should only be applied to the first item and then automatically move to the next items according to Bootstrap functionality. When the "active" class is distributed to all items, my images end up stacking on top of each other instead of smoothly transitioning within the carousel. I noticed that removing the "active" class using the browser inspect tool resolves the problem. Therefore, I am looking for a way to prevent AngularJS from repeating the "active" class in the remaining "carousel-item". Any assistance with this matter would be greatly appreciated.
<div class="modal fade" id="SingerAlbum">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" ng-repeat="album in ActiveSinger.albums">
<img class="d-block w-100" ng-src="{{album.album_cover}}" alt={{album.slide_number}}>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>