Ion-item-sliding appears outside the list


#1

I am trying to create an ion-list in which each item in that list allows you to slide to review a delete button. Here is my code:

<ion-list>
	<div ng-repeat="image in vm.myImages">
		<ion-item-sliding>
			<ion-item ng-click="vm.toggleDescription(image)">
				<ion-thumbnail item-left>
					<img src="{{image.key}}" width="30%" height="30%" style="float: left;">
				</ion-thumbnail>
	<!--Some ommitted code here (But just some description)-->
			</ion-item>
			<ion-item-options slide="left">
				<button ion-button color="danger">
					Remove
				</button>
			</ion-item-options>
		</ion-item-sliding>
	</div>
</ion-list>

The code results in the following:

enter image description here

Why is the remove button showing up outside the ion-list? It should be inside the ion-item-sliding directive.


FULL CODE:

<ion-list>
	<div ng-repeat="image in vm.myImages">
		<ion-item-sliding>
			<ion-item ng-click="vm.toggleDescription(image)">
				<ion-thumbnail item-left>
					<img src="{{image.key}}" width="30%" height="30%" style="float: left;">
				</ion-thumbnail>
				<div class="myMoments_metaData">
					<div class="ion-happy-outline" class="myMoments_likes">{{image.likes}}</div>
					<div class="myMoments_time">{{image.time}}</div>
					<div class="myMoments_description">
						<div ng-show="image.showShortDescription">{{image.shortDescription}}<br>
							<div class="myMoments_toggleDescription">show more...</div>
						</div>
						<div ng-show="!image.showShortDescription">{{image.description}}<br> 			
							<div class="myMoments_toggleDescription">show less</div> 
						</div>
						 <br>
					</div>
				</div>
			</ion-item>
			<ion-item-options slide="left">
				<button ion-button color="danger">
					Remove
				</button>
			</ion-item-options>
		</ion-item-sliding>
	</div> <!--End of ng-repeat -->
</ion-list>