Angular - 2 way data binding with DIV element style

Question

I'm building a dragging interface using Angular and jQueryUI. The reason I want to use Angular is, I wanted angularJS 2 way data binding which is really awesome!

Here is the codepen - http://codepen.io/anon/pen/qmuvH/

In the codepen - you will see there is box with text - "hello everyone" (div#layer). I did bind its style with angular -

top:{{layer.data.top}}px;left: {{layer.data.left}}px

And added two input fields which also have ng-model to that same layer.data.top and layer.data.left; So when you change the value in the input field - it will move the div element. So far this works great.

But I also made that "hello everyone" div draggable using jqueryUI in angular directive. So you can drag that element around.

What I want now is - If I drag around the "hello everyone" div element - it will also update layer.data.left and layer.data.top. So this will also change the value in the input field. How can I do that?

Answer 1

With the help of 2 answers, I ended up using following update -

I just updated my code in drag event function -

drag: function( event, ui ) 
{
    scope.layer.data.left = ui.position.left;
    scope.layer.data.top = ui.position.top;
    scope.$apply();
}

Here is the updated codepen - http://codepen.io/anon/pen/wgzme