how to get index of current slide in ionic? - angularjs

Question

newbie here.. I'm using ion-slides to show a set of cards with their corresponding card numbers. I'm trying to get the index of the current ion-slide but currently my app just shows a blank screen. here's my HTML code:
<ion-view title="Main Menu" id="page1">
<ion-content padding="true" class="has-header" scroll="false">
<ion-slides on-slide-changed="slideHasChanged($index)" disable-side-menu-drag="" options="{'loop': false}" slider="slider1" delegate-handle="slider1" id="mainMenu-slider1" style="width:100%;height:270px;">
<ion-slide-page ng-repeat="card in cardNumbers" id="mainMenu-slide24" style="background:url("{{card.cardImage}}") no-repeat center;background-size:cover;"><br><br><br><br><br><br><br><br><br><br>
<h5>Card Number:{{card.card}}</h5>
<p>
<h5>Balance:</h5>
</ion-slide-page>
</ion-slides>
<ion-slides options="options" slider="slider2">
<ion-slide-page id="mainMenu-slide27" style="height:400px;background-color:#d8dde6;" disable-scroll="false">1
<h5 align="center">Transaction History</h5>
<p>
<div class="col text-center">
<button id="mainMenu-button9" class="button button-dark">View Transaction History</button>
</div>
</p>
</ion-slide-page>
<ion-slide-page id="mainMenu-slide28">2
<div class="spacer" style="width: 300px; height: 20px;"></div>
<button id="mainMenu-button5" class="button button-positive button-block">Cards</button>
<button id="mainMenu-button6" class="button button-positive button-block">Nearby CICOs</button>
<button id="mainMenu-button7" class="button button-positive button-block">FAQ</button>
<button id="mainMenu-button8" class="button button-positive button-block">Contact Us</button>
</ion-slide-page>
</ion-slide>
</ion-content>
</ion-view>
and here's my controller.js code:
angular.module('app.controllers', [])
.controller('mainMenuCtrl', ['$scope', '$stateParams', '$ionicSlideBoxDelegate', function($scope, $stateParams, $ionicSlideBoxDelegate, sendCardNumService) {
$scope.cardNumbers = [{
card: "12345",
cardImage: "img/card1.png"
}, {
card: "678910",
cardImage: "img/card2.png"
}, {
card: "111213",
cardImage: "img/card3.png"
}]
$scope.currentCardNum = {}
$scope.slideHasChanged = function($index) {
$scope.currentCardNum = cardNumbers[$index].card;
}
$scope.setCurrentCardNum = function() {
sendCardNumService.sendCardNo($scope.currentCardNum);
}
$scope.options = {
direction: 'vertical',
slidesPerView: '1',
pagination: false,
initialSlide: 1,
showNavButtons: false
};
$scope.goToHistory = function(cardNum) {
$location.path('/page5');
}
}])

Answer 1

First listen to slides initializing
$scope.$on("$ionicSlides.sliderInitialized", function(event, data){
$scope.slider = data.slider;
//first slide loads here
$scope.activeIndex = data.slider.activeIndex;
console.log($scope.activeIndex); //will return 0
});
Then, When you change slides this is used to listen to the slide change
$scope.$on("$ionicSlides.slideChangeStart", function(event, data){
$scope.activeIndex = data.slider.activeIndex;
console.log($scope.activeIndex); //will return the current index of your slide
}
You can call your functions inside $ionicSlides.slideChangeStart function

Answer 2

What worked for me is this. In my controller.js code:
$scope.options1 = {
initialSlide: 0,
onInit: function(slider1)
{
$scope.slider1 = slider1;
},
onSlideChangeEnd: function(slider1)
{
console.log('The active index is ' + slider1.activeIndex);
$scope.currentIdx = slider1.activeIndex;
}
};