AngularJS list move animation

I finally got the list move animation working!

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<div ng-app="App" ng-controller="Ctrl">
    <button ng-click="addPerson()">Add Person</button>
    <br/>
    
        <div ng-repeat="person in people" ng-animate="'person'">
            {{person.first}} {{person.last}} &nbsp;
            <button ng-click="personUp($index)" ng-disabled="$first">up</button>
            <button ng-click="personDown($index)">down</button>
            <button ng-click="personRemove($index)">remove</button>
        </div>
</div>

CSS

.person-move {
    position: relative;
    top: 26px;
}

.person-move.person-move-active {
    transition: all 0.5s ease;
    top: 0;
}

.person-move + div {
    /* cannot have transition on this element */
    /*transition: all 1s ease;*/
    position: relative;
    top: -26px;
}

.person-move.person-move-active + div {
    transition: all 0.5s ease;
    position: relative;
    top: 0;
}

.person-enter {
    position: relative;
    opacity: 0.0;
    height: 0;
    left: 100px;
}

.person-enter.person-enter-active {
    transition: all 0.5s ease;
    opacity: 1.0;
    left: 0;
    height: 26px;
}


.person-leave {
    position: relative;
    opacity: 1.0;
    left: 0;
    height: 26px;
    z-index: -100;
}

.person-leave.person-leave-active {
    transition: all 0.5s ease;
    opacity: 0.0;
    left: 100px;
    height: 0;
    top: -13px;
}

JavaScript

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

function Ctrl($scope) {
    $scope.option = 0;
    
    var firstNames = ['Adam', 'Steve', 'Jessie', 'Frank', 'Kathy', 'Amy', 'Julie', 'Cindy', 'Bob', 'Jeff', 'Sandra'];
    var lastNames = ['Jones', 'Smith', 'Reynolds', 'Quincy', 'Drake', 'Stone', 'Doe', 'Skywalker'];
    
    $scope.addPerson = function() {
        $scope.people.push({ 
            first: firstNames[Math.floor(Math.random() * firstNames.length)],
            last: lastNames[Math.floor(Math.random() * lastNames.length)]
        });
    };
    
    $scope.people = [];
    for (i = 0; i < 5; i++) {
        $scope.addPerson();
    };

    $scope.personUp = function(index) {
        if (index <= 0 || index >= $scope.people.length)
            return;
        var temp = $scope.people[index];
        $scope.people[index] = $scope.people[index - 1];
        $scope.people[index - 1] = temp;
    };

    $scope.personDown = function(index) {
        if (index < 0 || index >= ($scope.people.length - 1))
            return;
        var temp = $scope.people[index];
        $scope.people[index] = $scope.people[index + 1];
        $scope.people[index + 1] = temp;
    };

    $scope.personRemove = function(index) {
        $scope.people.splice(index, 1);
    };
    
    window.MY_SCOPE = $scope;
}