ng-animate movement of a DOM element between multiple ng-repeat'ed arrays

Unsolved. http://stackoverflow.com/questions/16244848/ng-animate-movement-of-a-dom-element-between-multiple-ng-repeated-arrays

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<center>(Best viewed in Chrome.)</center>
<div ng-app="app" ng-controller="ListCtrl">
    <ul class="list-{{$index}}" ng-repeat="list in lists">
        <lh>List #{{$index}}</lh>
        <li ng-repeat="element in list" ng-animate="'element'">{{element.name}}</li>
    </ul>
</div>

CSS

* {
    font-family: monospace;
    font-size: 12px;
}
center {
    color: gray;
}
ul {
    position: absolute;
    width: 20%;
    list-style-type: circle;
    list-style-position: inside;
}
lh {
    font-weight: bold;
    font-size: 1.2em;
}
li {
    padding-left: 5px;
    background-color:#f0f0f0;
}
.list-0 {
    top: 50px;
}
.list-1 {
    left: 33%;
}
.list-2 {
    top: 100px;
    left: 66%;
}
/* ng-animate */
 .element-enter-setup, .element-leave-setup {
    -webkit-transition: all linear .5s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
    overflow: hidden;

}
.element-enter-setup {
    opacity: 1;
    height: 0px;
    -webkit-transform: scale(1,0);
}
.element-enter-start {
    opacity: 1;
    height: 20px;
    -webkit-transform: scale(1,1);
}
.element-leave-setup {
    opacity: 1;
    height: 20px;
    -webkit-transform: scale(1,1);
}
.element-leave-start {
    opacity: 1;
    height: 0px;
    -webkit-transform: scale(1,0);
}

JavaScript

/*
    Is it possible to clearly `ng-animate` the movement of an element from one `ng-repeat`-ed list to another?
*/

angular.module('app', []);
angular.module('app').controller('ListCtrl', ['$scope', function ($scope) {
    var lists = [
        [
            {name: 'Miško'},
            {name: 'Vojta'},
            {name: 'Igor'}
        ],
        []
    ];

    var randomIndex = function (arr) {
        return Math.floor(Math.random() * parseInt(arr.length));
    };

    var moveElement = function () {
        var list1, list2, element;

        // choose non-empty list
        while (list1 = lists[randomIndex(lists)]) {
            if (list1.length) break;
        }

        // choose random element from the list and remove it
        element = list1.splice(randomIndex(list1), 1)[0];

        // choose distinct list from the previous one and move the element to it
        while (list2 = lists[randomIndex(lists)]) {
            if (list2 !== list1) {
                list2.push(element);
                break;
            }
        }
    };

    $scope.lists = lists;

    (function repeater() {
        setTimeout(function () {
            $scope.$apply(function () {
                moveElement();
                repeater();
            });
        }, 500);
    }());
}]);