change id name of carousel by dynamically in angularjs - angularjs

Question

I have using carousel in my AngularJS App. I want change id of carousel each iteration but it is not working Please tell what did wrong?
<div ng-repeat="data in details">
<div class="carousel" id="{{data._id}}" style=" width: 290px;
max-width: 100% ;
height: 250px;">
<div class="carousel-inner">
<div class="item" ng-class="{active:!$index}" ng-repeat="photo in data.photos">
{{$index}}
<a target="_blank" ui-sref="PhotoUpload">
<img src="{{ photo }}" style=" width: 290px;
max-width: 100% ;
height: 250px;">
</a>
</div>
</div>
<a class="left carousel-control" data-target="#{{data._id}}" ng-non-bindable data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" data-target="#{{data._id}}" ng-non-bindable data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
First carousel image slide are working but after that second carousel images are not working if i click prev and next button first carousel images changing. but second images
Please help me.

Answer 1

I usually handle dynamic id values like this:
[attr.id]="data._id"
and for data-target
[attr.data-target]="'#' + data._id"

Answer 2

There must be possibilities your IDs are same for all elements. Please append {{$index}} within ID.
Try below snippet
id="{{data._id}}_{{$index}}"