Ion-slide-box adding images dynamically

first two slides sowing well but the slides added by ng-rpeat are showing as single slide aligned vertically under each other

    <ion-slide-box on-slide-changed="slideHasChanged($index)" auto-play="true">
			<ion-slide>
				<div class="box blue">
				<img ng-src="{{basePath+'/uploads/photos/l4-f0e74f0929.jpg'}}" style="width:100%;" class="attachment-shop_single wp-post-image" alt="" title="" /></div>
			  </ion-slide>
			  <ion-slide>
				<div class="box blue">
				<img ng-src="{{basePath+'/uploads/photos/l5-8f48863757.jpg'}}" style="width:100%;" class="attachment-shop_single wp-post-image" alt="" title="" /></div>
			  </ion-slide>
			  
			  <ion-slide ng-repeat="img in images" >
				<div class="box blue">
				<img ng-src="{{basePath+img.image}}" style="width:100%;" class="attachment-shop_single wp-post-image" alt="" title="" /></div>
			  </ion-slide>
			</ion-slide-box>

and here is my controller :

.controller('DetailsCtrl', function($scope, $stateParams, $timeout, ionicMaterialInk, ionicMaterialMotion , $http ,$ionicSlideBoxDelegate ) {
    
	// load screenshots
	var itemId = 8 ;  
	var url = window.baseUrl+'/service/getcatalogitemimages/'+itemId ;
	console.log( url);
	
	var promise = $http.get(url);
	promise.then(
	function(payload ) {
		console.log( payload.data);
	
		$scope.code = payload.data.code;
		$scope.images =payload.data.response;
	
		}
	);
})

found the answer
calling :

$ionicSlideBoxDelegate.update();

after

$scope.images =payload.data.response;