Next modal in angular

by ashwani121

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="showModal(t)">Show more</a>
        <div class="modal" ng-show="t.selected">
            <div class="close" ng-click="show = !show">X</div>
            {{t.name}} likes to eat {{t.food}} with his {{t.weapon}}!
            <div class="previous" ng-click="navModal($index-1)">Previous</div>
            <div class="next" ng-click="navModal($index+1)">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;
    var prevObj = null;
    $scope.showModal = function(obj){
    	if(prevObj && prevObj.selected)
      {
      	prevObj.selected = false;
      }
    	obj['selected'] = true;
      prevObj = obj;
    }
    
    $scope.navModal = function(index){
    if(index > 0 && index < $scope.turtles.length)
    	$scope.showModal($scope.turtles[index]);
    }
});