Animate element moving between lists

Question

Using AngularJS, I would like to animate an element being added to one list from another, as in a clone of the element should appear to move in the page from the menu of items, and be added to the target list.

<ul class="list">
  <li ng-click="choose(item)" ng-repeat="item in originItems">{{item.name}}</li>
</ul>
<ul class="list">
  <li ng-repeat="item in targetItems track by $index">{{item.name}}</li>
</ul> 

Where the function that adds the items does a simple push

$scope.choose = function(item) {
  $scope.targetItems.push(item);
}

You can see this in action (with no animation) at this Plunker

I've considered custom directives and events, but not really got anywhere. What's a good structure of directives and/or events to allow this movement animation be achieved, keeping this a separate from the business of adding to a list as possible?

Note: my exact situation in terms of business logic and animation is a bit different, but I'm hoping the solution to this is flexible enough to allow some changes/additions to what happens in the menu, during the "move" animation, and what happens in the target list.

Answer 1

Demo http://plnkr.co/edit/XYnf7U?p=preview

1. I removed list style to ensure proper position of list item while moving. If you have to enable list style, you have to consider that.
2. The demo works by: when user add an item, it get the position of original and final items, and apply a jquery animation to the cloned list item between those two positions.
3. Use $event.target to identify original item.