Moodle for mobile

Hi,

I'm using ion-slide-box that is used for tour given to the user once he enters my addon for specific course in MM2 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 the 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;
};

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 column.

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