How to clear the index of ngrepeat in a modal

Question

I have a list of elements. Ever element has a gallery attached to it. I use a modal to show the gallery of each. It s working perfectly.

Now the problem I have is about the pictures that are showed first. Let s say I have this in the first element :

Gallery  
 -JrYz8TI7N9ItkAoVtUZ
 -JrYz8TJatqcBm-MBXIK
 -JrYz8TJatqcBm-MBXIL
 -JrYz8TLYhbKEnVEYmBC

and this in the second element

Gallery
 -JrYz8sPnCEYM-TXHJ9I
 -JrYz8sSLq_mJ6k_tSfG

I would like to always start showing the elements from the first element. This does not ahppen here. I somhow end up having an index of 3 in a Gallery of 2 elements..

Can you tell me how I can change this behaviour?

Here is my modal ctroller:

// Dealing with modals for the gallery
$ionicModal.fromTemplateUrl('Cards/image-modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
}).then(function(modal) {
    $scope.modal = modal;
});

$scope.openModal = function(index) {
    $scope.currentGallery = $scope.cards[index].Gallery;
    //console.log('This is' + $scope.cards[index].Gallery);
    console.log("When slide opens " + $scope.slideIndex);
    $scope.modal.show();
    // Important: This line is needed to update the current ion-slide's width
    // Try commenting this line, click the button and see what happens
    $ionicSlideBoxDelegate.update();
};

$scope.closeModal = function() {
    console.log("When slide closes " + $scope.slideIndex);
    $scope.slideIndex = 0;
    console.log("When slide closes and I change it to " + $scope.slideIndex);
    $scope.modal.hide();
};

// Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
    $scope.modal.remove();
    console.log('Modal is destroyed!');
});
// Execute action on hide modal
$scope.$on('modal.hide', function() {
    // Execute action
    console.log('Modal is hidden!');
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
    // Execute action
    console.log('Modal is removed!');

});
$scope.$on('modal.shown', function() {
    console.log("When slide is on MODAL.SHOW " + $scope.slideIndex);
    console.log('Modal is shown!');
});

// Call this functions if you need to manually control the slides
$scope.next = function() {
    $ionicSlideBoxDelegate.next();
};

$scope.previous = function() {
    $ionicSlideBoxDelegate.previous();
};

// Called each time the slide changes
$scope.slideChanged = function(index) {
    $scope.slideIndex = index;
    console.log("When slide changes " + $scope.slideIndex);
};

here is my modal code:

<div class="modal image-modal transparent" ng-click="closeModal()">
    <ion-slide-box on-slide-changed="slideChanged(index)" show-pager="false">
        <ion-slide ng-repeat="item in currentGallery">
            <img ng-src="{{item.picture}}" class="fullscreen-image" />
            <p class="info">{{item.caption}}</p>
        </ion-slide>
    </ion-slide-box>
</div>

Can you please help? I tried to change that index ay many places, and I do but it does not affect the slideshow moving forward..

Thank you in advance,

And cheers!

Answer 1

It has been solved... I basically used this :

var II = $ionicSlideBoxDelegate.currentIndex() + 1; 
for (var i = II - 1; i >= 0; i--) { 
    $ionicSlideBoxDelegate.previous(); 
    if ($ionicSlideBoxDelegate.previous() == 0) { 
    break; 
    }; 
}; 

This way, it always goes back to the beginning whenever I close it. Cheers!