Bootstrap UI Modal - Injecting and initializing $index for ng-repeat - angularjs

Question

Currently I have a image gallery like this:
<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>
My image gallery functions look like this:
// 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;
};
When I click on a image my 'open' function will run:
$scope.open = function (index) {
$scope.modalInstance = $modal.open({
templateUrl: 'templates/hotelmodal.html',
controller: 'HotelCtrl',
size: 'lg',
scope:$scope
});
};
And a modal will pop-up:
<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>
As you can see my main gallery site and the content of the modal is almost the same.
The only purpose of the modal is to show the image in a larger size - which is working perfectly.
My only problem is, that I want the modal to show the same image as the main gallery site when it opens.
I've tried to use the following on the modal ng-repeat - just for test purpose:
ng-init="$index = 1"
But it just mess up ng-repeat.
As you can see I inject $index in my open function - but again.. I don't know how to use the number in the in the modal ng-repeat.
Your help will be greatly appreciated!

Answer 1

The only thing i needed to do was:
// initial image index
if (!$scope._Index) {
$scope._Index = 0;
}
Hereafter the $scope._Index im using to determine the active picture, will not be set to 0 when the modal opens with the same controller. The picture will then be the same in the modal as on the main page.
I don't think this is the best way to do it, but it's working great.