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="showPopup($index)">Show more</a>        
    </li>
  </ul>
  
  <div class="modal" ng-show="show">
    <div class="close" ng-click="closePopup()">X</div>
      {{selectedTurtle.name}} likes to eat {{selectedTurtle.food}} with his {{selectedTurtle.weapon}}!
    <div class="previous" ng-click="prev()">Previous</div>
    <div class="next" ng-click="next()">Next</div>
  </div>
</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

angular
	.module('myApp', [])
  .controller('myCtrl', ['$scope', function ($scope) {
		$scope.index = 0;
    
    $scope.selectedTurtle = {};
    
    $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.showPopup = showPopup;
    $scope.closePopup = closePopup;
    $scope.next = next;
    $scope.prev = prev;
    
    function setTurtle(index) {
    	$scope.selectedTurtle = $scope.turtles[index];
    }
    
    function showPopup(index) {
    	$scope.index = index;
      setTurtle($scope.index);
      $scope.show = true;
    }
    
    function closePopup() {
    	$scope.show = false;
    }
    
    function next() {
    	if ($scope.index !== $scope.turtles.length - 1) {
      	$scope.index++;
        setTurtle($scope.index);
      }
    }
    
    function prev() {
    	if ($scope.index !== 0) {
      	$scope.index--;
        setTurtle($scope.index);
      }
    }
}]);