Angular: Flexbox Order Transition

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div class='parent' ng-controller="MyCtrl">
  Change set of order (0-1) <input type='text' ng-model='current' />
  <div class='wrapper' ng-repeat='item in data' ng-style='{ order: item.order[current] || item.order[0] }'>
    <div ng-class='{child: (item.label), hidden: (!item.label)}'>
      {{ item.label }}
    </div>
  </div>
</div>

CSS

.parent {
  display: flex;
  flex-direction: column;
}

.wrapper {
  height: 10px;
  overflow: visible;
  transition: all 2s linear;
}

.child {
  height: 100px;
  border: 1px solid;
}

.hidden {
  display: none;
}

JavaScript

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    raw = [
    	{ order: [1, 3], label: 'Content abc' },
      { order: [2, 1], label: 'Content def' },
      { order: [3, 4], label: 'Content mno' },
      { order: [4, 2], label: 'Content xyz' }
    ];
    
    $scope.data = [];
    
    angular.forEach(raw, function (value) {
   		value.order = value.order.map(function(i)
      {
      	return 10*i;
      });
      $scope.data.push(value);
    });
    
    for (var i = 0; i < raw.length; i++) {
    	for (var j = 1; j < 10; j++) {
      	$scope.data.push({ order: [10*i + j], label: 0 });
      };
    };
    
    $scope.current = 0;
}