Animations with Angular JS CSS

I have been trying to create animation using GreenSock TweenMax, Angular JS and CSS.

The problem is that I have to stack the .front and .back on top of each other in order to make them flip animate. This works fine with one post, its when I create more than 1 that the .post div all stack on top of each other.

So really I am trying to stack the .front and .back on top of each other but the .post(s) below each other.

Here is the code.

Some HTML which renders a .box with a .front and .back using ng-repeat.

<div class="container posts-page">
  <div class='post answer-animation'
      ng-repeat='(postId, post) in posts'
      ng-class="{'answer':showAnswer}"
      ng-mouseenter='showAnswer = true'
      ng-mouseleave='showAnswer = false'
      >

      <div class='box'>

        <div class='front info'>
          <div>
            <h1>HELLO</h1>
          </div>
        </div>


        <div class='back info'>
          <div>
            <h1>BACK</h1>
          </div>
        </div>

      </div>

  </div>
</div>

The relevant CSS to the animation which positions the front and back onto of each other.

.box{
  position: relative;
  width: 960px;
  height: 100%;
}

.front, .back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    position: absolute;
} 

The angular code to create the animation,

app.directive('post', function() {
  var controller = function($scope) {
    $scope.showAnswer = false;
  };

  return {
    restrict: 'C',
    scope: false,
    controller: controller
  };
});

app.animation('.answer-animation', function(){

  CSSPlugin.defaultTransformPerspective = 1000;

  TweenMax.set($("div.back"), {rotationX:-180});

  $.each($("div.box"), function(i,element)
  {
    console.log(element);
    var frontCard = $(this).children("div.front")
    var backCard = $(this).children("div.back")
    var tl = new TimelineMax({paused:true})

    tl
      .to(frontCard, 1, {rotationX:180})
      .to(backCard, 1, {rotationX:0},0)

    this.animation = tl;
  });

  return {
    beforeAddClass: function(element, className, done){
      if (className == 'answer') {
        var el = element.find('.box')[0];
        el.animation.play();
      }
      else {
        done();
      }
    },

    beforeRemoveClass: function(element, className, done) {
      if (className == 'answer') {
        var el = element.find('.box')[0];
        el.animation.reverse();
      }
      else {
        done();
      }
    }
  };
});