angularjs draggable directive

I'm implementing a image draggable directive. My code is at http://plnkr.co/edit/MXnOu6HM1XmMEzot7dn3 Basically its primarily made up of a base movable directive

appModule.directive('movable', function ($document) {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function postLink(scope, element, attrs) {
                var startX = 0,
                    startY = 0,
                    x = 0,
                    y = 0;

                element.css({
                    position: 'absolute'
                });

                function bindElementMove() {
                    element.bind('mousedown', function (event) {
                        // Prevent default dragging of selected content
                        console.log("binding element to move.");
                        startX = event.screenX - x;
                        startY = event.screenY - y;
                        $document.bind('mousemove', moveDiv);
                        $document.bind('mouseup', mouseup);
                    });
                }

                bindElementMove();

                function moveDiv(event) {
                    console.log('im moving');
                    y = event.screenY - startY;
                    x = event.screenX - startX;
                    element.css({
                        top: y + 'px',
                        left: x + 'px'
                    });
                    scope.$apply(function () {
                        scope.tb.x = element.css("top");
                        scope.tb.y = element.css("left");
                    });
                }

                function mouseup() {
                    console.log("mouse up fired - unbind moveDiv and mouseUp");
                    $document.unbind('mousemove', moveDiv);
                    $document.unbind('mouseup', mouseup);
                }
            }
        }
    });

And an image directive

appModule.directive("imgelement", function ($document) {
    return {
        restrict: 'E',
        template: '<div movable resizable constrain deletable rotatable ng-style="{top:tb.x, left:tb.y, height:tb.height, width:tb.width}"><img ng-src="{{tb.blob_url}}"  ng-style="{height:tb.height, width:tb.width}"/></div>',
        require: 'ngModel',
        replace: true,
        link: function (scope, element, attrs) {
            hello = scope;
        }
    };
});

However, as seen in plunkr, when i first click on the image and try to drag, it goes through several passes of the mousemove event, and then freezes, not moving anymore. Subsequently releasing my mouse moves the image, strangely. Any idea what i'm doing wrong here??