How to insert data dynamically to ion-slide-box?

I’m using Ionic framework and Angular js to build a news app !

I’m showing the news on ion-slide-box using ng-repeat here is an example :

<ion-slide-box on-slide-changed="slideHasChanged($index)" show-pager="true" ng-if="items" >
  <ion-slide  ng-repeat="i in items">   
           <h4>{{i.name}}</h4>       
<p>{{i.gender}}</p> 
    <p>{{i.age}}</p>
</div> 
  </ion-slide>
    </ion-slide-box>

I want to insert data dynamically to my ion-slide-box for each slide so I’m using this code :

$scope.slideHasChanged = function(index) {

          $scope.items.push("{name:'John', age:25, gender:'boy'}");
      }

but this doesn’t seem to work right so if you have an idea on how can I reslove this that would be great :slight_smile:

CODEPEN + CODE

http://codepen.io/webslinger/pen/QbMaON - The only issue when updating the Slide-Box there is a white flash…

@webslinger thank you so much ! is there no way to get rid of the white flash ???

by either not showing the pager or put the pager at the bottom of the page - if you check the codepen again, I changed it slightly :smile:

Thank you so much ! that helped me a lot