Angular ng-repeat animation

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.js"></script>
<div ng-app="app" ng-controller="testCtrl as ctrl">
  <ul>
    <li ng-repeat="item in ctrl.items" ng-bind="item.value">
      
    </li>
  </ul>
  <button ng-click="ctrl.addItem()">
  Add
  </button>
  <button ng-click="ctrl.removeItemAt(4)">
  Remove at 5
  </button>
</div>

CSS

li
{
  height: 48px;
  width: 300px;
  border: 1px solid lightgrey;
  background-color: white;
  position: relative;
}
li.ng-enter,
li.ng-enter ~ li {
  transform: translateY(-100%);
}
li.ng-enter.ng-enter-active,
li.ng-enter.ng-enter-active ~ li {
  transform: translateY(0);
}
li.ng-animate {
  z-index: -1;
}
li.ng-animate,
li.ng-animate ~ li {
  transition: transform 0.6s;
}
li.ng-leave,
li.ng-leave ~ li {
  transform: translateY(0);
}
li.ng-leave.ng-leave-active,
li.ng-leave.ng-leave-active ~ li {
  transform: translateY(-100%);
}

JavaScript

angular.module('app', ['ngAnimate'])
  .controller('testCtrl', ['$scope', function($scope) {
    var self = this;
    
    self.items = [];
    
    var i = 65;
    for(; i < 72; i++)
    {
    	self.items.push({ value: String.fromCharCode(i) });
    }
    
    self.addItem = function()
    {
    	self.items.push({ value: String.fromCharCode(i) });
      i++;
    }
    
    self.removeItemAt = function(index)
    {
    	self.items.splice(index, 1);
    }
  }])