how to get index of current slide in ionic?

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(&quot;{{card.cardImage}}&quot;) 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;
    }

};