Slide tab only work from slide 1 to slide 5, Bug?


#1

I want to have slide tab for 7 pages, but it works correctly for 1 to 5 ,but 6 and 7 will repeat page 1 and 2.

I am not sure which part is incorrect. Took out any two of the pages will work correctly.

template

 <ion-content id="screenerContent" scroll="false">
      <div class="row slideTabWrapper">
      <div class="col col-30 one" ng-class="{selected: currentSlide==0}" ng-click="currentSlide = 0">Top Technical</div>
      <div class="col col-30 two" ng-class="{selected: currentSlide==1}" ng-click="currentSlide = 1">Bottom Technical</div>
      <div class="col col-30 three" ng-class="{selected: currentSlide==2}" ng-click="currentSlide = 2">Top Fundamental</div>
      <div class="col col-30 four" ng-class="{selected: currentSlide==3}" ng-click="currentSlide = 3">Bottom Fundamental</div>
      <div class="col col-30 five" ng-class="{selected: currentSlide==4}" ng-click="currentSlide = 4">Top Overall</div>
      <div class="col col-30 six" ng-class="{selected: currentSlide==5}" ng-click="currentSlide = 5">Bottom Overall</div> 
      <div class="col col-30 seven" ng-class="{selected: currentSlide==6}" ng-click="currentSlide = 6">Market Stats</div>
    </div>

    <ion-slide-box class="slider" show-pager="false" active-slide="currentSlide">
      <ion-slide>
        <div class="list">
          <div class="item row" ng-repeat="bStock in topBuy" ng-click="openDetail(bStock)">
            <div class="col col-30 stockCol">
              <p>{{bStock.Stock}}</p>
              <p>{{bStock.Name}}</p>
            </div>
            <div class="col boldText vindexCol" ng-class="colorCoding[bStock.Trade]"><span>T: {{bStock.Tindex | number:2}}</span></div>
            <div class="col previousCol"><span>{{bStock.Previous_close}}</span></div>
            <div class="col changeCol" ng-class="{red: bStock.Change<0, green: bStock.Change>0,orange: bStock.Change==0}">
              <p>{{bStock.Change}}</p>
              <p>({{(bStock.Change_pc>=0)?"+":""}}{{bStock.Change_pc}}%)</p>
            </div>
          </div>
        </div>
      </ion-slide>

      <ion-slide>
        <div class="list">
          <div class="item row" ng-repeat="sStock in topSell"  ng-click="openDetail(sStock)" >
            <div class="col col-30 stockCol">
              <p>{{sStock.Stock}}</p>
              <p>{{sStock.Name}}</p>
            </div>
            <div class="col boldText vindexCol" ng-class="colorCoding[sStock.Trade]"><span>T: {{sStock.Tindex | number:2}}</span></div>
            <div class="col previousCol"><span>{{sStock.Previous_close}}</span></div>
            <div class="col changeCol" ng-class="{red: sStock.Change<0, green: sStock.Change>0,orange: sStock.Change==0}">
              <p>{{sStock.Change}}</p>
              <p>({{(sStock.Change_pc>=0)?"+":""}}{{sStock.Change_pc}}%)</p>
            </div>
          </div>
        </div>
      </ion-slide>

        <ion-slide>
          <div class="list">
            <div class="item row" ng-repeat="aStock in topFin" ng-click="openDetail(aStock)">
              <div class="col col-30 stockCol">
                <p>{{aStock.Stock}}</p>
                <p>{{aStock.Name}}</p>
              </div>
              <div class="col boldText vindexCol" ng-class="colorCoding[aStock.Trade]"><span>F: {{aStock.Findex | number:2}}</span></div>
              <div class="col previousCol"><span>{{aStock.Previous_close}}</span></div>
              <div class="col changeCol" ng-class="{red: aStock.Change<0, green: aStock.Change>0,orange: aStock.Change==0}">
                <p>{{aStock.Change}}</p>
                <p>({{(aStock.Change_pc>=0)?"+":""}}{{aStock.Change_pc}}%)</p>
              </div>
            </div>
          </div>
        </ion-slide>

        <ion-slide>
          <div class="list">
            <div class="item row" ng-repeat="cStock in bottomFin"  ng-click="openDetail(cStock)" >
              <div class="col col-30 stockCol">
                <p>{{cStock.Stock}}</p>
                <p>{{cStock.Name}}</p>
              </div>
              <div class="col boldText vindexCol" ng-class="colorCoding[cStock.Trade]"><span>F: {{cStock.Findex | number:2}}</span></div>
              <div class="col previousCol"><span>{{cStock.Previous_close}}</span></div>
              <div class="col changeCol" ng-class="{red: cStock.Change<0, green: cStock.Change>0,orange: cStock.Change==0}">
                <p>{{cStock.Change}}</p>
                <p>({{(cStock.Change_pc>=0)?"+":""}}{{cStock.Change_pc}}%)</p>
              </div>
            </div>
          </div>
        </ion-slide>
      <ion-slide>
        <ion-slide>
          <div class="list">
            <div class="item row" ng-repeat="dStock in topVin" ng-click="openDetail(dStock)">
              <div class="col col-30 stockCol">
                <p>{{dStock.Stock}}</p>
                <p>{{dStock.Name}}</p>
              </div>
              <div class="col boldText vindexCol" ng-class="colorCoding[dStock.Trade]"><span>V: {{dStock.Vindex | number:2}}</span></div>
              <div class="col previousCol"><span>{{dStock.Previous_close}}</span></div>
              <div class="col changeCol" ng-class="{red: dStock.Change<0, green: dStock.Change>0,orange: dStock.Change==0}">
                <p>{{dStock.Change}}</p>
                <p>({{(dStock.Change_pc>=0)?"+":""}}{{dStock.Change_pc}}%)</p>
              </div>
            </div>
          </div>
        </ion-slide>

        <ion-slide>
          <div class="list">
            <div class="item row" ng-repeat="eStock in bottomVin"  ng-click="openDetail(eStock)" >
              <div class="col col-30 stockCol">
                <p>{{eStock.Stock}}</p>
                <p>{{eStock.Name}}</p>
              </div>
              <div class="col boldText vindexCol" ng-class="colorCoding[eStock.Trade]"><span>V: {{eStock.Vindex | number:2}}</span></div>
              <div class="col previousCol"><span>{{eStock.Previous_close}}</span></div>
              <div class="col changeCol" ng-class="{red: eStock.Change<0, green: eStock.Change>0,orange: eStock.Change==0}">
                <p>{{eStock.Change}}</p>
                <p>({{(eStock.Change_pc>=0)?"+":""}}{{eStock.Change_pc}}%)</p>
              </div>
            </div>
          </div>
        </ion-slide>
      <ion-slide>
        <div class="row">
          <div class="col boldText" ng-class="colorCoding[marketSentiment]">
            Market Sentiment: {{marketSentiment}}
          </div>
        </div>
        <div class="row">
          <div class="col boldText">

            <div class="barChart">
              <div class="green" style="width: {{bar.green/bar.total *100}}%;"></div><div class="orange" style="width: {{bar.orange/bar.total *100}}%;"></div><div class="red" style="width: {{bar.red/bar.total *100}}%;"></div>
            </div>
            <span class="greenText">Bull: {{bar.green}}</span><br>
            <span class="orangeText">Neutral: {{bar.orange}}</span><br>
            <span class="redText">Bear: {{bar.red}}</span><br>

          </div>
        </div>
      </ion-slide>
    </ion-slide-box>
  </ion-content>

angular.js

angular.module('myproject.controllers').controller('stockScreenerCtrl',
  ['$scope', '$rootScope', '$cashDataFactory', '$webServicesFactory', '$marketProvider', '$colorCodeProvider', '$state', '$globalFactory', '$ionicLoading',
    function($scope, $rootScope, $cashDataFactory, $webServicesFactory, $marketProvider, $colorCodeProvider, $state, $globalFactory, $ionicLoading) {
      $ionicLoading.show();
      $scope.bar = {green: 0, orange: 0, red: 0, total: 1};
      $scope.currentSlide = 0;
      $scope.currentMarket = $cashDataFactory.getItem("currentMarket");
      $scope.colorCoding = $colorCodeProvider;

      function loadTop() {
        $webServicesFactory.get($marketProvider[$scope.currentMarket].topGetURL, {AnonymousToken: $marketProvider[$scope.currentMarket].token}).then(
          function success(response) {
            $scope.topBuy = response.Stock.slice(0, 10);
            $scope.topSell = response.Stock.slice(10, 20);
            loadStockCount();
            loadTopF();
            loadTopV();
            $ionicLoading.hide();
          },
          function error(error) {
            $ionicLoading.hide();
          }
        );
      }
      function loadTopF() {
        $webServicesFactory.get($marketProvider[$scope.currentMarket].topFinURL, {AnonymousToken: $marketProvider[$scope.currentMarket].token}).then(
          function success(response) {
            $scope.topFin = response.Stock.slice(0, 10);
            $scope.bottomFin = response.Stock.slice(10, 20);
            loadStockCount();
            loadTop();
            loadTopV();
            $ionicLoading.hide();
          },
          function error(error) {
            $ionicLoading.hide();
          }
        );
      }
      function loadTopV() {
        $webServicesFactory.get($marketProvider[$scope.currentMarket].topVinURL, {AnonymousToken: $marketProvider[$scope.currentMarket].token}).then(
          function success(response) {
            $scope.topVin = response.Stock.slice(0, 10);
            $scope.bottomVin = response.Stock.slice(10, 20);
            loadStockCount();
            loadTop();
            loadTopF();
            $ionicLoading.hide();
          },
          function error(error) {
            $ionicLoading.hide();
          }
        );
      }
      function loadStockCount() {
        $webServicesFactory.get(
          $marketProvider[$scope.selectedMarket].queryURL+"/count",
          {AnonymousToken: $marketProvider[$scope.selectedMarket].token}
        ).then(
          function success(data) {
            data = data.Trade;
            console.info(data);
            $scope.bar.total = (data[0].BUY_total||0) + (data[0].HOLD_total||0) + (data[0].SELL_total||0);
            console.info($scope.bar.total);
            $scope.bar.green = 0;
            $scope.bar.orange = 0;
            $scope.bar.red = 0;

            $scope.bar.green = data[0].BUY_total;
            $scope.bar.orange = data[0].HOLD_total;
            $scope.bar.red = data[0].SELL_total;
            $scope.marketSentiment = data[0].Market_sentiment;


            $ionicLoading.hide();
          },
          function error(error) {
            $ionicLoading.hide();
          }
        );
      }
      loadTop();
      loadTopF();
      loadTopV();




      $scope.openDetail = function (stock) {
        console.log(stock + " /hello");
        $globalFactory.stockDetail = {};
        console.info(stock);
        //if($scope.currentMarket == "kls")
        $globalFactory.stockDetail.stock = stock.Stock;
        $globalFactory.stockDetail.market = $scope.currentMarket;
        $state.go("app.screenerDetail");
      };


      $rootScope.$on("currentMarketChanged", function (e, market) {
        $scope.currentMarket = market;
        $ionicLoading.show();
        loadTop();
        loadTopV();
        loadTopF();
      });
    }
  ]
);

css

#screenerContent .slideTabWrapper{
  height: 50px;
  color: #ffffff;
  padding: 0;
  overflow-x: scroll;
  overflow-y: hidden;
}
#screenerContent .slideTabWrapper .col{
  height: 100%;
  width: 33%;
  text-align: center;
  padding-top: 0px;
  background-color: #16324f;
}
.slideTabWrapper .col.one{
  border-bottom: solid #33cd5f 3px;
}
.slideTabWrapper .col.two{
  border-bottom: solid #ef473a 3px;
}
.slideTabWrapper .col.three{
  border-bottom: solid #33cd5f 3px;
}
.slideTabWrapper .col.four{
  border-bottom: solid #ffffff 3px;
}
.slideTabWrapper .col.five{
  border-bottom: solid #33cd5f 3px;
}
.slideTabWrapper .col.six{
  border-bottom: solid #ffffff 3px;
}
.slideTabWrapper .col.seven{
  border-bottom: solid #ffffff 3px;
}
.slideTabWrapper .col.selected{
  background-color: #102439;
}

#2

Anyone experience the same issue?

Is it a known bug that ionic unable to slide more than 5 pages?