Angular-animate repeat bug

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.4.0-rc.0" src="https://code.angularjs.org/1.4.0-rc.0/angular.js"></script>
    <script data-require="angular-animate@1.4.0-rc.0" data-semver="1.4.0-rc.0" src="https://code.angularjs.org/1.4.0-rc.0/angular-animate.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app='myApp'>
    <div ng-controller='MainCtrl'>
      <button ng-click='nextSet()'>Swap List</button>
      <div ng-repeat='item in data_set' class='list-item'>
        {{item}}
      </div>
    </div>
  </body>

</html>

// Code goes here

var sample_data = [
  [
    'one',
    'two',
    'three',
    'four'
  ],
  [
    'une',
    'deux',
    'trois',
    'quatre'
  ]
];

angular.module('myApp', ['ngAnimate']).controller(
  'MainCtrl', function($scope){
    var current_set = 0;
    $scope.data_set = sample_data[0];
    $scope.nextSet = function(){
      current_set = (current_set + 1) % 2;
      $scope.data_set = sample_data[current_set];
    }
  }  
);

/* Styles go here */

.list-item {
  transition: transform .2s ease-in-out;
}

.list-item:hover{
  transform: translateZ(40px);
  color: blue;
}

body {
  perspective: 200px;
  perspective-origin:0% 50%;
}