Bootstrap UI Modal — внедрение и инициализация $index для ng-repeat

В настоящее время у меня есть галерея изображений, как это:

        <div class="slider">
            <img ng-repeat="image in gallery" class="img-responsive" ng-swipe-right="showPrev()" ng-swipe-left="showNext()" ng-show="isActive($index)" ng-src="{{image}}" ng-click="open($index)"/>

            <a class="arrow prev" ng-click="showPrev()"></a>
            <a class="arrow next" ng-click="showNext()"></a>

            <ul class="navigator">
                <li ng-repeat="image in gallery" ng-class="{'active':isActive($index)}">
                    <img src="{{image}}" ng-click="showPhoto($index);" class="img-responsive" />
                </li>
            </ul>

        </div>

Функции моей галереи изображений выглядят следующим образом:

// initial image index
$scope._Index = 0;

// if a current image is the same as requested image
$scope.isActive = function (index) {
    return $scope._Index === index;
};

// show prev image
$scope.showPrev = function () {
    $scope._Index = ($scope._Index > 0) ? --$scope._Index : $scope.gallery.length - 1;
};

// show next image
$scope.showNext = function () {
    $scope._Index = ($scope._Index < $scope.gallery.length - 1) ? ++$scope._Index : 0;
};

// show a certain image
$scope.showPhoto = function (index) {
    $scope._Index = index;
};

Когда я нажимаю на изображение, моя функция «открыть» запускается:

$scope.open = function (index) {

  $scope.modalInstance = $modal.open({
    templateUrl: 'templates/hotelmodal.html',
    controller: 'HotelCtrl',
    size: 'lg',
    scope:$scope

  });

};

И появится модальное окно:

<div class="modal-header">
    <h3 class="modal-title">Billedfremviser</h3>
 </div>
 <div class="modal-body">
<div ng-cloak class="slider">
            <img ng-init="$index = 1" ng-repeat="image in gallery" class="img-responsive" ng-swipe-right="showPrev()" ng-swipe-left="showNext()" ng-show="isActive($index)" ng-src="{{image}}"/>

            <a class="arrow prev" ng-click="showPrev()"></a>
            <a class="arrow next" ng-click="showNext()"></a>

            <ul class="navigator">
                <li ng-repeat="image in gallery" ng-class="{'active':isActive($index)}">
                    <img src="{{image}}" ng-click="showPhoto($index);" class="img-responsive" />
                </li>
            </ul>

        </div>       
 </div>
 <div class="modal-footer">
   <button class="btn btn-warning" ng-click="close()">Luk billedfremviser</button>
  </div>

Как видите, мой основной сайт-галерея и содержание модального окна почти одинаковы. Единственная цель модала - показать изображение в большем размере, что отлично работает. Моя единственная проблема в том, что я хочу, чтобы при открытии модального окна отображалось то же изображение, что и на сайте основной галереи.

Я пытался использовать следующее в модальном ng-repeat - только для целей тестирования:

ng-init="$index = 1"

Но это просто портит ng-repeat. Как видите, я ввожу $index в свою открытую функцию, но опять же... Я не знаю, как использовать число в модальном ng-repeat.

Ваша помощь будет принята с благодарностью!