Angular - Module

Module with controller, filter, and directive.

HTML

<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-resource.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<body ng-app="animate" ng-controller="myCtrl">
  <div >
    <div class='button ' ng-style="calculatePosition" ng-class="{animate: animate}" id="1" >
      Div 1
    </div>
 <div class='button ' ng-style="calculatePosition" ng-class="{animate: animate}" id="2" >
      Div 1
    </div>
 <div class='button ' ng-model="3" ng-style="transform: 'translate(10px,20px)'" ng-class="{animate: animate}" id="3" >
      Div 1
    </div>

    <div class='button targetMe'>
      Div 2
    </div>
  </div>
  {{top}}
  {{left}}
</body>

CSS

.clickMe {
  position: absolute;
  cursor: pointer;
  top:250px;;
  left: 125px;
}
.animate{
   transition:2.5s ease;
}

.button {
  background: #6666FF;
  padding: 25px;
  display:inline-block;
  width: 50px;
  height: 50px;
}

JavaScript

var mainApp = angular.module('animate', [])


angular
  .module('animate').controller('myCtrl', myCtrl)



function myCtrl($scope) {
 

 
  
var moveMe= function (clickMe){
			//do caclculation here:
     
      
      var clickMe =  $('#'+clickMe);
      var target = $('.targetMe');
      var left = target.offset().left - clickMe.offset().left;
      var top = target.offset().top - clickMe.offset().top;
      
  		$scope.clickMe.calculatePosition = {
         transform: 'translate(' + left + 'px,' + top + 'px)'
      }
      
     $scope.clickMe.animate = true;
  }
  var i=1;
 while(i<4)
 {
   moveMe(i);
   i++;
 }
}