How can I make my modal draggable using an angularjs/jquery directive?

Here is the directive that I am using:

angular.module('myapp').directive('draggable', function($document) {
    retu function(scope, element, attr) {
        var startX = 0, startY = 0, x = 0, y = 0;
        element.css({
            position: 'relative',
            border: '1px solid red',
            backgroundColor: 'lightgrey',
            cursor: 'pointer',
            display: 'block',
            width: '65px'
        });
        element.on('mousedown', function(event) {
            // Prevent default dragging of selected content
            event.preventDefault();
            startX = event.screenX - x;
            startY = event.screenY - y;
            $document.on('mousemove', mousemove);
            $document.on('mouseup', mouseup);
        });

        function mousemove(event) {
            y = event.screenY - startY;
            x = event.screenX - startX;
            element.css({
                top: y + 'px',
                left:  x + 'px'
            });
        }

        function mouseup() {
            $document.off('mousemove', mousemove);
            $document.off('mouseup', mouseup);
        }
    };
});

And this is my modal html -

 <div class="modal-dialog">
    <div class="modal-content" draggable="true">
        <div id="myModal" >
            <div class="modal-header">
                <h4 class="modal-title">{{sign}} group</h4>
            </div>

            <div class="image-wrapper container-fluid">
                <div class="no-select gallery col-md-12">
                    <div ng-repeat="url in urls">
                        <div class= "gallery-item col-md-3">
                            <img class="gallery-img-review-modal no-select" ng-src="{{url.imageUrl}}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

This does not really work for me. Attached is the image of how the content actually appears. The inside is draggable but the images are not visible and it has shrunk. I want the outer to be draggable.

I also tried jquery draggable: $("#myModal").draggable({ handle: ".modal-header" });

Doesn't seem to be working. Any ideas how this can be done?