Number of ion-slide doesn't update dynamically with collections of different sizes

ionic-v1
1

Hi all,

I use Ionic 1.0.0-beta.14 to build a mobile app. Today, I build only the app for the Android platform.

I create a <ion-slide-box> which contains a variable number of <ion-slide>. At a time, the <ion-slide-box> displays album’s photos when the user selects an album. There are several albums and each album has a different number of photos. So when the user click on an album I want the <ion-slide-box> to refresh and contains exactly the right number of <ion-slide>, each one containing a photo.

But, I’ve noticed an issue. The number of <ion-slide> is egal to the length N of the first displayed album. Even if I update the scope variable which is used in the ng-repeat and I execute this code : $ionicSlideBoxDelegate.$getByHandle('photo-viewer').update();

If the user selects a new album, the <ion-slide-box> contains only N <ion-slide> and then, only the N first photos of this album are displayed. The ion-slide-box does’nt show me the rest of photos !

Here my HTML code :

<ion-slide-box delegate-handle="photo-viewer" 
                     does-continue="true" 
                     auto-play="true" 
                     slide-interval="1500" 
                     show-pager="false" 
                     ng-if="photos">
   <ion-slide ng-repeat="p in photos">
       <div class="box">
          <img ng-src="{{p.url}}" class="border"></img>
       </div>
  </ion-slide>
</ion-slide-box>

My CSS file

.border {
    border: white solid 1px;
    border-radius: 10px;
}

My JS file

.controller('MyCtrl', ['$scope', '$ionicSlideBoxDelegate', '$timeout', function($scope, $ionicSlideBoxDelegate, $timeout) {
      $scope.albums = [
                    {
                         photos: [
                                { url: 'img/photo-000000005.jpg' }
                         ]
                    },
                    {
                         photos: [
                                { url: 'img/photo-000000001.jpg' },
                                { url: 'img/photo-000000002.jpg' },
                                { url: 'img/photo-000000003.jpg' }
                         ]
                    },
                    {
                         photos: [
                                { url: 'img/photo-000000004.jpg' },
                                { url: 'img/photo-000000008.jpg' },
                                { url: 'img/photo-000000010.jpg' },
                                { url: 'img/photo-000000003.jpg' },
                                { url: 'img/photo-000000020.jpg' }
                         ]
                    }
               ];

      $scope.sortie.photos = getAlbumPhotos(0);
      $timeout(
          function() { 
               $ionicSlideBoxDelegate.$getByHandle('photo-viewer').update();
          },0);

      function getAlbumPhotos(albumIndex) {
          var photosOfAlbum = [],
                i = 0;

          while ($scope.albums[albumIndex].photos[i]) {
               photosOfAlbum.push($scope.albums[albumIndex].photos[i]);
                i++;
          }

           return photosOfAlbum;
      }

   $scope.selectAlbumOnclick = function(albumIndex) {
          $scope.sortie.photos = getAlbumPhotos(albumIndex);

          $timeout(
             function() { 
                 $ionicSlideBoxDelegate.$getByHandle('photo-viewer').update();
             },0);
   };
}]);

In my example only one is created and only one photo is displayed whatever the user click on the first, second or third album.

Bug or not ? I think yes because the number of <ion-slide> may adjust according to the scope variable photos in the ng-repeat, since I call $ionicSlideBoxDelegate.$getByHandle('photo-viewer').update(); . But it don’t…

Please, anyone can help ? Thanks in advance.