Upon loading the page, my ion-slide-box does not function correctly. However, if I refresh the page, it works as expected. I have tried referring to some links but have been unable to resolve this issue on my own. Any assistance would be greatly appreciated.

Here is my HTML code:

  <ion-view view-title="" hide-back-button="true">
  <ion-content class="padding" style="top: 48px;" ng-show="viewEntered">
    <ion-item ng-show="emptyCategory">
      <h2 style="text-align:center; font-weight:bold; white-space:normal;">No category found.</h2>
    </ion-item>
    <div class="row" ng-repeat="categoryDetail in categoryDetailList">
       <div class="col card" style="margin-bottom:5px;margin-top:5px;" ng-if="categoryDetail.token==1">
         <div class="row no-padding">
          <div class="col col-33 no-padding"><img ng-src={{categoryDetail.image}} height="110px;" width="100%;"> </div>
          <div class="col col-67 no-padding-top">
            <div class="row responsive-md no-padding-top" style="margin:0;">
              <div class="col no-padding" style="margin: 0;">{{categoryDetail.title}}</div>
              <div class="col no-padding" style="margin: 0;"><i class="icon ion-android-call"></i> <span class="text-color-gray keyword-result-content"> {{categoryDetail.phoneNo}} </span></div>
              <div class="col no-padding" style="margin: 0;"><i class="icon ion-android-mail"></i> <span class="text-color-gray keyword-result-content"> {{categoryDetail.email}} </span></div>
              <div class="col no-padding" style="margin: 0;"><i class="icon ion-location"></i> <span class="text-color-gray keyword-result-content"> {{categoryDetail.location_name}} </span></div>
              <div class="col no-padding" style="margin: 0;"><i class="icon ion-ios-world-outline"></i> <span class="text-color-gray keyword-result-content"> {{categoryDetail.website}} </span></div>
            </div>
          </div>
        </div>
        <div ng-if="categoryDetail.paidStatus == 1" class="col" style="margin: 0;text-align: right;border-top:1px solid #AFAFAF;">
          <button class="button button-small icon-right ion-android-arrow-dropright-circle button-dark" ng-click="getcategoryDeail(categoryDetail.id)">
            View Details
          </button>
        </div>
      </div>
    </div>

    <div class="row" style="margin-top: 15px;">  
      <ion-slide-box does-continue="true" auto-play="true" slide-interval="2000" on-slide-changed="slideHasChanged($index)">
        <ion-slide ng-repeat="advertise in advertiseDetailList" >
          <div ng-class="getRandomColor(advertise.profileId)" ui-sref="app.categoryDetail({detailsId: advertise.profileId})">
            <img ng-src="{{advertise.image}}" width="100%" height="125px" />
          </div>
        </ion-slide>
      </ion-slide-box>
   </div>
  </ion-content>
</ion-view>

This is my controller code :

.controller('CategoryIdDetailController', function($timeout, $scope, $http, $state, baseUrl, $ionicLoading, $stateParams, $ionicBackdrop, $ionicModal, $ionicSlideBoxDelegate, $ionicScrollDelegate) {

  $scope.$on("$ionicView.enter", function () { 
    $scope.viewEntered = true; 
  });
  $scope.$on("$ionicView.beforeLeave", function () { 
    $scope.viewEntered = false; 
  });

  $ionicLoading.show({
    template: '<ion-spinner icon="spiral"></ion-spinner>'
  });

  $scope.advertiseDetailList = []; 

  $http({
    method : "GET",
    url : baseUrl+"category_id="+$stateParams.categoryId+"&methodName=category.detailList"
  }).then(function mySucces(response) {
    if(response.data.responseMsg.resultLength == 0) {
      $ionicLoading.hide();
      $scope.categoryDetailList = response.data.responseMsg.category;
      $scope.emptyCategory = true;
    }  else  {
      $ionicLoading.hide();

      $scope.categoryDetailList = response.data.responseMsg.category;
      //$scope.advertiseDetailList = response.data.responseMsg.advertise;
      $scope.$watch('learnSpeed', function (newValue, oldValue) {
        $ionicSlideBoxDelegate.update();
      });

      angular.forEach(response.data.responseMsg.advertise, function(value, key) {
        $scope.advertiseDetailList.push({'image': value.image});
      })

      $scope.emptyCategory = false;
    }
  }); 

  $scope.getcategoryDeail = function(detailsId) {
    $state.go('app.categoryDetail',{detailsId:detailsId});
  }

})

The server response :

"responseMsg": {

    -
    "0": {
        "id": 1,
        "imgContent": "images/1.jpeg",
        "profileId": 9,
        "image": "http://localhost/helloKasaragodApi/static/images/1.jpeg"
    },
    -
    "1": {
        "id": 2,
        "imgContent": "images/2.jpeg",
        "profileId": 16,
        "image": "http://localhost/helloKasaragodApi/static/images/2.jpeg"
    },
    -
    "2": {
        "id": 3,
        "imgContent": "images/3.jpeg",
        "profileId": 33,
        "image": "http://localhost/helloKasaragodApi/static/images/3.jpeg"
    }

},