Next modal in angular

HTML

<script src="http://code.angularjs.org/1.2.16/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="t in turtles">
        {{t.name}} - {{t.weapon}} 
        <a ng-click="showMore(t)">Show more</a>
        <div class="modal" ng-show="t.show">
            <div class="close" ng-click="hideMore(t)">X</div>
            {{t.name}} likes to eat {{t.food}} with his {{t.weapon}}!
            <div class="previous" ng-click="showPrevious(t, $index)">Previous</div>
            <div class="next" ng-click="showNext(t, $index)">Next</div>
        </div>
    </li>
  </ul>
</div>

CSS

ul {
  margin-top:40px;
}
a {
  color:blue;
  text-decoration:underline;
  cursor:pointer;
}
.modal {
  width:360px;
  height:200px;
  padding:20px;
  border:1px solid black;
  background-color:white;
  position:fixed;
  left:10px;
  top:10px;
}
.close {
  position:absolute;
  top:5px;
  right:10px;
  cursor:pointer;
  color:gray;
}
.close:hover {
  color:black;
}
.previous {
  position:absolute;
  bottom:5px;
  left:10px;
  cursor:pointer;
  color:blue;
}
.previous:hover {
  text-decoration:underline;
}
.next {
  position:absolute;
  bottom:5px;
  right:10px;
  cursor:pointer;
  color:blue;
}
.next:hover {
  text-decoration:underline;
}

JavaScript

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.turtles = [
        { name: "Michellangelo", weapon: "nunchaku", food:"pizza" },
        { name: "Donatello", weapon: "bo", food:"pizza" },
        { name: "Leonardo", weapon: "katana", food:"turtle soup" },
        { name: "Rafael", weapon: "sai", food:"pizza" } 
    ];
    //$scope.show=false;
    $scope.showMore = function(turtle) {
    	turtle.show = true;
    };
    $scope.hideMore = function(turtle) {
    	turtle.show = false;
    };
    $scope.showNext = function(turtle, index) {
    	if((index+1) > ($scope.turtles.length - 1)) {
        return;
      }
      else {
      	turtle.show = false;
      	$scope.turtles[index+1].show = true;
      }
    	
    };
    $scope.showPrevious = function(turtle, index) {
      if((index-1) < 0) {
        return;
      }
      else {
        turtle.show = false;
      	$scope.turtles[index-1].show = true;
      }
    };
});