Angular: Image slide

HTML

<div ng-app="galleryTest">
   <div ng-controller="galleryContainer" class="gallery">
     <gallery ng-model="gallery"></gallery>
   </div>
</div>

CSS

.gallery {
	border: 15px solid #FFFFFF;
	border-radius: 5px;
	height: 500px;
	margin: 20px auto;
	position: relative;
	width: 800px;

	-webkit-perspective: 1000px;
	    -moz-perspective: 1000px;
	    -ms-perspective: 1000px;
	    -o-perspective: 1000px;
	    perspective: 1000px;
	 
	    -webkit-transform-style: preserve-3d;
	    -moz-transform-style: preserve-3d;
	    -ms-transform-style: preserve-3d;
	    -o-transform-style: preserve-3d;
	    transform-style: preserve-3d;
}

.gallery-item {
	position: absolute;
	top: 0;
	left: 0;
}

.arrow {
    cursor: pointer;
    display: block;
    height: 64px;
    margin-top: -35px;
    outline: medium none;
    position: absolute;
    top: 50%;
    width: 64px;
    z-index: 5;
}
.arrow.prev {
    background-image: url("http://www.script-tutorials.com/demos/366/images/prev.png");
    left: 20px;
    opacity: 0.2;
    transition: all 0.2s linear 0s;
}
.arrow.next {
    background-image: url("http://www.script-tutorials.com/demos/366/images/next.png");
    opacity: 0.2;
    right: 20px;
    transition: all 0.2s linear 0s;
}
.arrow.prev:hover{
    opacity:1;
}
.arrow.next:hover{
    opacity:1;
}

JavaScript

angular
  .module('galleryTest',[])
  .controller('galleryContainer', function($scope){
    $scope.gallery = [
	        {src: 'http://farm9.staticflickr.com/8042/7918423710_e6dd168d7c_b.jpg', desc: 'Image 01'},
	        {src: 'http://farm9.staticflickr.com/8449/7918424278_4835c85e7a_b.jpg', desc: 'Image 02'},
	        {src: 'http://farm9.staticflickr.com/8457/7918424412_bb641455c7_b.jpg', desc: 'Image 03'},
	        {src: 'http://farm9.staticflickr.com/8179/7918424842_c79f7e345c_b.jpg', desc: 'Image 04'},
	        {src: 'http://farm9.staticflickr.com/8315/7918425138_b739f0df53_b.jpg', desc: 'Image 05'},
	        {src: 'http://farm9.staticflickr.com/8461/7918425364_fe6753aa75_b.jpg', desc: 'Image 06'}
	    ];
  })
  .directive('gallery', function(){
      return {
        restrict: 'E',
        template: '<img ng-repeat="image in gallery" ng-src="{{image.src}}" class="gallery-item" ng-show="isActive($index)">'+
          '<a class="arrow prev" href="#" ng-click="showPrev()"></a>'
+
          '<a class="arrow next" href="#" ng-click="showNext()"></a>',
        controller: ['$scope', '$http', function($scope, $http) {
          $scope._Index = 0;
   
           // if a current image is the same as requested image
            $scope.isActive = function (index) {
                return $scope._Index === index;
            };
         
            // show prev image
            $scope.showPrev = function () {
                $scope._Index = ($scope._Index > 0) ? --$scope._Index : $scope.gallery.length - 1;
            };
         
            // show next image
            $scope.showNext = function () {
                $scope._Index = ($scope._Index < $scope.gallery.length - 1) ? ++$scope._Index : 0;
            };
        }]
      };
    });