Ion-slide-box weird display when called from promise

ionic-v1
1

Hi,

I’m using ion-slide-box that is used for tour given to the user once he enters specific course in Moodle mobile 2 app. Since this tour is customized for each course, it calls back-end service before data for tour could be initialized.
It’s called using promise in the following way:

     return function($scope, $state) {
            $scope.icon = 'ion-ios-list';
            $scope.title = 'mma.morph.morphtitle';
              $scope.action = function($event, course) {
                $event.preventDefault();
                $event.stopPropagation();
                 $mmaMorph.fetchComponents(course.id).then(function(){
                  if($mmaMorph.isComponentsInitialized()){
                      $state.go('site.morph-tour', {course: course});
                  }else{
                        $state.go('site.morph.mainsubmenu', {course: course
                });  
                  }
                });
            };
        };

///in $mmaMorph

self.fetchComponents =function (courseid){
    componentsInitialized=false;
    var promise=getCourseComponents(courseid);
    promise.then(
        function(answer){
            var data={
                components:[],
                count: 0
            };
            angular.forEach(answer.components, function(value, key){
                data.components.push(value.name);
                data.count=data.count+1;
            });
            coursesComponents=data.components;
           componentsInitialized=true;
        },function(error){
        },function(progress){
        });
        return promise;
};

From the controller I initialize data that should be displayed in the tour

function initTour(){
var pages=$http.get(‘/addons/morph/files/tours.json’).success(function(data){
$scope.tourPages=data;
});
$scope.componentsInitialized=true;
}
initTour();

And it is displayed using ion-slide-box:

 <ion-view view-title="How to use MORPH in this course" id="tour-view">
  <ion-nav-buttons side="right">
    <button class="button button-clear"  ng-click="skipTour()" nav-clear>Skip</button>
  </ion-nav-buttons>
  <ion-content>
  <mm-loading hide-until="componentsInitialized">
  <ion-slide-box show-pager="true"  on-slide-changed="reportSlideChanged($index)" ng-if="componentsInitialized">
    <ion-slide ng-repeat="page in tourPages">
    <h3>{{page.title}} </h3>
      <span class="icon icon-slide ion-document-text"></span>
       <p>{{page.description}}</p>
    </ion-slide>
  </ion-slide-box>
   </mm-loading>
</ion-content>
</ion-view>

For some reason it doesn’t display properly. All the content is displayed near the left side edge in one tiny column.

image
image536×771 13.8 KB

If I resize the screen, everything is back to normal. Also, if I don’t use promise, everything works fine.

Do you have any idea how to solve this issue?

Thanks,
Zoran