javascript - 変数に基づいてng-styleを動的に更新する方法は?

Question

変数を更新することにより、 x、yの値を配列 (item.x、item.y) からng-style親要素のに渡したいです(更新はディレクティブによって行われます)。transformXtransformYng-click

-html-

<section ng-style="{'transform' : translate(transformX,transformY)}">
  <figure ng-repeat="item in items" 
          style="left: {{item.x}}px; top: {{item.y}}px;"
          ng-click="$parent.transformX = item.x * -1; 
                    $parent.transformY = item.y * -1;">
    {{item.title}}
  </figure>
</section>

-コントローラ-

$scope.transformX = 0;
$scope.transformY = 0;

$scope.items = [

  { title: "foo",
    x: 50,
    y: -20
  }

  ,{ title: "bar",
    x: -40,
    y: 10
  }
];

これは私が達成できないことです-クリックされたアイテムが中央に配置されるようsectionに、子要素をクリックして親要素の()スタイル属性を更新するfigure必要があります(したがってitem.y * -1)。変数は更新されますが、スタイルは更新されません。

プランク

実際に機能して動的に更新するために、ディレクティブtransformX内のtransformY変数を作成する方法はありますか? ng-styleこれng-style="{'transform' : translate(transformX,transformY)}"はうまくいきません..