How to separate multiple image sliders in angularjs from each other?

Question

Angular

Good afternoon!
I'm making image sliders. When 1 slider everything works as it should. When there are several of them, then when you click on the preview, large images for all sliders change. It is necessary to register unique variables or somehow 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>

What I need is 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 here, in addition to syntactic problems with src="{{mainFotoFactory.main{{$index}}}}"
$index in the nested ng-repeat is already its own, but I need an external one.
Thanks

Answer 1

mainFotoFactory.main{{$index}} as I understand it should be mainFotoFactory.main[{{$index}}]
And $index is easy to google, for example jsfiddle.net/X5Tdh/2

Answer 2

<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>