angularjs evaluating scope inside style ie9 not working

Question

So I basically have a div block with a style attribute and inside of that I have left:{{left}}px; right:{{right}}px.
$scope.left and $scope.right get updated but that does not move my item.
Here is a fiddle

http://jsfiddle.net/climboid/5XqG7/4/

Any help is much appreciated

<div ng-app ng-controller="Controller" class="container">
  <button class="moveTo" ng-click="findPosClick()"> move to here</button>
  <div class="block" style="left:{{left}}px; top:{{top}}px;"></div>
  <div class="posTxt">left:{{left}}</div>
  <div class="posTxt2">top:{{top}}</div>
</div>

function Controller($scope) {
  $scope.findPosClick = function(){
    var location = event.target ? event.target : event.srcElement;
    var pos = $(location).position();
    $scope.left = pos.left;
    $scope.top = pos.top;
  }

}

Also when I look into the ie9 console I don't see the style attribute applied at all to the div...

Answer 1

This is a known problem with IE; it will simply throw out style tags it does not like.

Use the ng-style directive instead.

<div ng-style="{left: left+'px', top: top+'px'}"></div>