How to separate multiple images slider in angularjs to each other?

Good day!

The conclusion of sliders images. 1 when the slider everything works as it should. When there are several, then when you click in preview to change large image all the sliders. Need occasionally unique variable or some other way to get out of the situation. 

<div ng-controller="reviewCtrl">
 <div class="col-sm-6 col-xs-12" ng-repeat="review in reviews">
 <div ng-controller="reviewImgCtrl">
 <div class="row">
{{$index}}
 <div class="col-xs-12" ng-repeat="reviewImage in reviewImages | filter:{id_review:review.id} | limitTo:1">
 <img ng-init="mainFotoFactory.main = clientURL + reviewImage.foto" src="{{mainFotoFactory.main}}" class="review-main-foto">
</div>
</div>
 <div class="row">
 <div class="col-xs-3" ng-repeat="reviewImage in reviewImages | filter:{id_review:review.id} | limitTo:4">
 <img ng-click="mainFotoFactory.main = clientURL + reviewImage.foto" src="{{clientURL + reviewImage.foto}}" class="review-more-foto">
</div>
</div>
</div>
</div>
 </div>


And necessary, I believe, something like:
<div ng-controller="reviewCtrl">
 <div class="col-sm-6 col-xs-12" ng-repeat="review in reviews">
 <div ng-controller="reviewImgCtrl">
 <div class="row">
{{$index}}
 <div class="col-xs-12" ng-repeat="reviewImage in reviewImages | filter:{id_review:review.id} | limitTo:1">
 <img ng-init="mainFotoFactory.main{{$index}} = clientURL + reviewImage.foto" src="{{mainFotoFactory.main{{$index}}}}" class="review-main-foto">
</div>
</div>
 <div class="row">
 <div class="col-xs-3" ng-repeat="reviewImage in reviewImages | filter:{id_review:review.id} | limitTo:4">
 <img ng-click="mainFotoFactory.main{{$index}} = clientURL + reviewImage.foto" src="{{clientURL + reviewImage.foto}}" class="review-more-foto">
</div>
</div>
</div>
</div>
 </div>


But then in addition to syntax problems with src="{{mainFotoFactory.main{{$index}}}}"
$index in nested ng-repeat has its own, and I need external.

Thank you
July 8th 19 at 11:32

Related questions

More answers about "How to separate multiple images slider in angularjs to each other?"
2 answers
July 8th 19 at 11:34
Solution
mainFotoFactory.main{{$index}} I understand should be mainFotoFactory.main[{{$index}}]

And $index is easy guslitsa, here's an example jsfiddle.net/X5Tdh/2
Thank you very much, Alex! Greatly helped me out;) $parent is the class! - chad68 commented on July 8th 19 at 11:37
: I would recommend ng-init option (last in the example) - nannie72 commented on July 8th 19 at 11:40
July 8th 19 at 11:36
<div ng-controller="reviewCtrl">
 <div class="col-sm-6 col-xs-12" ng-repeat="review in reviews">
 <div ng-controller="reviewImgCtrl">
 <div class="row">
 <div class="col-xs-12" ng-repeat="reviewImage in reviewImages | filter:{id_review:review.id} | limitTo:1">
 <img src="{{mainFotoFactory.main[$parent.$index]}}" class="review-main-foto">
</div>
</div>
 <div class="row">
 <div class="col-xs-3" ng-repeat="reviewImage in reviewImages | filter:{id_review:review.id} | limitTo:4">
 <img ng-init="mainFotoFactory.main[$parent.$parent.$index] = clientURL + reviewImage.foto" ng-click="mainFotoFactory.main[$parent.$index] = clientURL + reviewImage.foto" src="{{clientURL + reviewImage.foto}}" class="review-more-foto">
</div>
</div>
</div>
</div>
 </div>

Find more questions by tags Angular