How to animate ng-repeat items relative to click events causing the change : <p>I'm trying to animate a user selecting items from different sets of items.
The item should animate from the clicked set to it's new position in list of selected items.</p>

<p>In the below demo, consider the pink boxes as available items and the bordered box as the list of selected items (blue boxes). User can select an item by clicking on either of the pink boxes:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('test', ['ngAnimate'])
  .controller('testCtrl', function($scope) {
    $scope.products = [{}, {}, {}, {}];
    $scope.purchased = [{}];
    $scope.purchase = function(dir) {
      $scope.direction = dir
      $scope.purchased.push($scope.products.pop());
    };
  })
  .directive('testDir', function($animate) {
    return {
      link: function(scope, element) {
        $animate.on('enter', element, function(element, phase) {
          $target = scope.direction == 'left' ? $('.stock:first') : $('.stock:last');
          element.position({
            my: 'center',
            at: 'center',
            of: $target,
            using: function(pos, data) {
              $(this).css(pos);
              $(this).animate({
                top: 0,
                left: 0
              });
            }
          });
        });
      }
    };
  });</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.stock {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: hotpink;
}
.stock.right {
  margin-left: 100px;
}
.product {
  height: 50px;
  width: 50px;
  border: 1px solid;
}
.purchased {
  height: 60px;
  margin-top: 100px;
  border: 2px dotted;
}
.purchased .product {
  display: inline-block;
  margin: 5px;
  background: dodgerblue;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-2.1.3.min.js"&gt;&lt;/script&gt;
&lt;script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"&gt;&lt;/script&gt;
&lt;script src="https://code.angularjs.org/1.4.8/angular.js"&gt;&lt;/script&gt;
&lt;script src="https://code.angularjs.org/1.4.8/angular-animate.js"&gt;&lt;/script&gt;
&lt;div ng-app="test" ng-controller="testCtrl"&gt;
  &lt;div class="stock" ng-click="purchase('left')"&gt;&lt;/div&gt;
  &lt;div class="stock right" ng-click="purchase('right')"&gt;&lt;/div&gt;
  &lt;div class="purchased clearfix"&gt;
    &lt;div class="product" ng-repeat="product in purchased" data-test-dir&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<hr>

<p>Well, it kind of works - but I'm using jQuery-ui to find out the starting position (The position of pink boxes will wary in a responsive design) and jquery animate method to animate the element.</p>

<p>Also I have to store the clicked direction in scope and I'm setting both the initial position and animating to end position in the <code>enter</code> event listener.</p>

<p>I have been reading and experimenting a lot with  built in animation hooks in angular, but couldn't figure out a proper way to animate elements from relative/dynamic positions.</p>

<p>Is there a better way to achieve the same user experience in angular js way..? </p>
