Using the same function to style each repeated element slightly differently in AngularJS
<p>I want to know how to properly reuse controllers, modules and functions in AngularJS to make a slightly different offset for each of the posts (placeholders for now just showing where the posts will be) in <a href="http://plnkr.co/edit/9XeEqMxdUGDXtrS5TmR0?p=preview" rel="nofollow">this Plunker</a>.</p>

<p>When later ngRepeat will output, for example, 6 posts, I want each of them to use the same code as in the mousePosition() function, but for each element calculate the x and y coordinates with a new variable to increase the gap accordingly.</p>

<p>I thought the radian offset between posts will work but it is very narrow, so you may ignore that. The question is about how to have this code applied on each repeated element with a different variable, like a counter.</p>

<pre><code>angular.module('mouseMovement', [])
  .controller('MouseMovementController', ['$scope', function MouseMovementController($scope) {

    numberOfPosts = 1
    radiansBetweenPosts = (90 / numberOfPosts) * Math.PI / 180

    $scope.mousePosition = function(event) {

      mouseXpercent = event.pageX / window.innerWidth * 2

      x = Math.cos(mouseXpercent * Math.PI + radiansBetweenPosts) * 50 + 50
      y = Math.sin(mouseXpercent * Math.PI + radiansBetweenPosts) * -50 + 50

      $scope.position = {
        left: x + '%',
        top: y + '%'
      }

    }
  }])
</code></pre>

<p>EDIT: I just had an idea that perhaps the better idea is to loop through the child elements within the div that contains all the posts?</p>