Bug in collection-repeat ion-list in ion-slide-box


#1

Hello,

I have the following markup

<ion-slide-box show-pager="false">
		<ion-slide ng-controller="RecipeList">
			<ion-content>
				<ion-list>
					<ion-item collection-repeat="recipe in recipes" class="item" ng-class="recipe.image? 'item-thumbnail-left' : ''"  collection-item-width="'100%'"
  collection-item-height="getItemHeight(item, $index)"
  ng-style="{height: getItemHeight(item, $index)}">
						<h2>{{recipe.title}}</h2>
						<p>
							{{recipe.description}}
						</p>
					</ion-item>
				</ion-list>
			</ion-content>
		</ion-slide>

and the following controller

.factory('Recipes', ['$resource',function($resource) {
    return  $resource('recipes/recipes.json');
} ]).controller('RecipeList',['$scope','$ionicSlideBoxDelegate','Recipes',function($scope,$ionicSlideBoxDelegate,Recipes){
$ionicSlideBoxDelegate.enableSlide(false);

$scope.recipes = [];
Recipes.get(function(data){
	$scope.recipes = data.recipes;
});

$scope.getItemHeight = function(item, index) {
    //Make evenly indexed items be 10px taller, for the sake of example
    return (index % 2) === 0 ? 50 : 60;
  };
}])

recipes.json has an array of length = 2; However when application is run I get

<div class="slider" show-pager="false" style="visibility: visible;"><div class="slider-slides" ng-transclude="" style="width: 1136px;">
		<ion-slide ng-controller="RecipeList" class="slider-slide" data-index="0" style="width: 568px; left: 0px; transition: 300ms; -webkit-transition: 300ms; -webkit-transform: translate(0px, 0px) translateZ(0px);">
			<ion-content class="scroll-content ionic-scroll  has-header has-footer"><div class="scroll" style="-webkit-transform: translate3d(0px, 1.19062381056972px, 0px) scale(1);">
				<ion-list class="disable-user-behavior"><div class="list">
					<!-- collectionRepeat: recipe in recipes -->
				<ion-item collection-repeat="recipe in recipes" class="item" ng-class="recipe.image? 'item-thumbnail-left' : ''" collection-item-width="'100%'" collection-item-height="getItemHeight(item, $index)" ng-style="{height: getItemHeight(item, $index)}" style="position: absolute; -webkit-transform: translate3d(-2000px, -2000px, 0px);">
						<h2 class="ng-binding">{{recipe.title}}</h2>
						<p class="ng-binding">
							{{recipe.description}}
						</p>
					</ion-item><ion-item collection-repeat="recipe in recipes" class="item" ng-class="recipe.image? 'item-thumbnail-left' : ''" collection-item-width="'100%'" collection-item-height="getItemHeight(item, $index)" ng-style="{height: getItemHeight(item, $index)}" style="position: absolute; -webkit-transform: translate3d(-2000px, -2000px, 0px);">
						<h2 class="ng-binding">{{recipe.title}}</h2>
						<p class="ng-binding">
							{{recipe.description}}
						</p>
					</ion-item><ion-item collection-repeat="recipe in recipes" class="item" ng-class="recipe.image? 'item-thumbnail-left' : ''" collection-item-width="'100%'" collection-item-height="getItemHeight(item, $index)" ng-style="{height: getItemHeight(item, $index)}" style="position: absolute; -webkit-transform: translate3d(-2000px, -2000px, 0px);">
						<h2 class="ng-binding">{{recipe.title}}</h2>
						<p class="ng-binding">
							{{recipe.description}}
						</p>
					</ion-item><ion-item collection-repeat="recipe in recipes" class="item" ng-class="recipe.image? 'item-thumbnail-left' : ''" collection-item-width="'100%'" collection-item-height="getItemHeight(item, $index)" ng-style="{height: getItemHeight(item, $index)}" style="position: absolute; -webkit-transform: translate3d(-2000px, -2000px, 0px);">
						<h2 class="ng-binding">{{recipe.title}}</h2>
						<p class="ng-binding">
							{{recipe.description}}
						</p>
					</ion-item><ion-item collection-repeat="recipe in recipes" class="item" ng-class="recipe.image? 'item-thumbnail-left' : ''" collection-item-width="'100%'" collection-item-height="getItemHeight(item, $index)" ng-style="{height: getItemHeight(item, $index)}" style="position: absolute; -webkit-transform: translate3d(-2000px, -2000px, 0px);">
						<h2 class="ng-binding">{{recipe.title}}</h2>
						<p class="ng-binding">
							{{recipe.description}}
						</p>
					</ion-item><ion-item collection-repeat="recipe in recipes" class="item" ng-class="recipe.image? 'item-thumbnail-left' : ''" collection-item-width="'100%'" collection-item-height="getItemHeight(item, $index)" ng-style="{height: getItemHeight(item, $index)}" style="position: absolute; -webkit-transform: translate3d(-2000px, -2000px, 0px);">
						<h2 class="ng-binding">{{recipe.title}}</h2>
						<p class="ng-binding">
							{{recipe.description}}
						</p>
					</ion-item><ion-item collection-repeat="recipe in recipes" class="item" ng-class="recipe.image? 'item-thumbnail-left' : ''" collection-item-width="'100%'" collection-item-height="getItemHeight(item, $index)" ng-style="{height: getItemHeight(item, $index)}" style="position: absolute; -webkit-transform: translate3d(-2000px, -2000px, 0px);">
						<h2 class="ng-binding">{{recipe.title}}</h2>
						<p class="ng-binding">
							{{recipe.description}}
						</p>
					</ion-item><ion-item collection-repeat="recipe in recipes" class="item" ng-class="recipe.image? 'item-thumbnail-left' : ''" collection-item-width="'100%'" collection-item-height="getItemHeight(item, $index)" ng-style="{height: getItemHeight(item, $index)}" style="position: absolute; -webkit-transform: translate3d(-2000px, -2000px, 0px);">
						<h2 class="ng-binding">{{recipe.title}}</h2>
						<p class="ng-binding">
							{{recipe.description}}
						</p>
					</ion-item><ion-item collection-repeat="recipe in recipes" class="item item-thumbnail-left" ng-class="recipe.image? 'item-thumbnail-left' : ''" collection-item-width="'100%'" collection-item-height="getItemHeight(item, $index)" ng-style="{height: getItemHeight(item, $index)}" style="position: absolute; -webkit-transform: translate3d(0px, 50px, 0px);">
						<h2 class="ng-binding">Zesty Garlic Flavored Avocado Yogurt Dip</h2>
						<p class="ng-binding">
							For this recipe I'll be using a Hass avocado as I love the rich and creamy texture of it.
						</p>
					</ion-item><ion-item collection-repeat="recipe in recipes" class="item" ng-class="recipe.image? 'item-thumbnail-left' : ''" collection-item-width="'100%'" collection-item-height="getItemHeight(item, $index)" ng-style="{height: getItemHeight(item, $index)}" style="position: absolute; -webkit-transform: translate3d(0px, 0px, 0px);">
						<h2 class="ng-binding">Refreshing Tamarind Juice.</h2>
						<p class="ng-binding">
							Tamarind juice wasn't a favorite for me as I much preferred making Tamarind Balls with whatever tamarind we would borrow from the neighbors tree.
						</p>
					</ion-item></div></ion-list>
			</div><div class="scroll-bar scroll-bar-v"><div class="scroll-bar-indicator scroll-bar-fade-out" style="height: 0px; -webkit-transform: translate3d(0px, 0px, 0px) scaleY(1); -webkit-transform-origin: 50% 0%;"></div></div></ion-content>
		</ion-slide>
		<ion-slide class="slider-slide" data-index="1" style="width: 568px; left: -568px; transition: 300ms; -webkit-transition: 300ms; -webkit-transform: translate(568px, 0px) translateZ(0px);">
			<ion-content ng-controller="RecipeDetails" class="scroll-content ionic-scroll  has-header has-footer"><div class="scroll" style="-webkit-transform: translate3d(0px, 0px, 0px) scale(1);">
				<h1>Test Content</h1>
				<p>Tamarind juice wasn't a favorite for me as I much preferred making Tamarind Balls with whatever tamarind we would borrow from the neighbors tree.</p>
			</div><div class="scroll-bar scroll-bar-v"><div class="scroll-bar-indicator scroll-bar-fade-out" style="height: 0px; -webkit-transform: translate3d(0px, 0px, 0px) scaleY(1);"></div></div></ion-content>
			<ion-footer-bar align-title="left" class="bar-assertive bar bar-footer">
				<div class="buttons">
					<button class="button">
						Back
					</button>
				</div>
				<div class="buttons">
					<button class="button">
						Start Audio
					</button>
				</div>
			</ion-footer-bar>
		</ion-slide>
	</div></div>

Why am I getting a list of ion-items with MORE than array .length?

Note that if remove I

/*Recipes.get(function(data){
	$scope.recipes = data.recipes;
});*/

I STILL get extra ion-items…WHY is that?

Note also that if I use ng-repeat instead of collection-repeat I get expected results