AngularJS: Перетаскивание большого изображения мышью через небольшую область.

Задача в следующем: нужно организовать просмотр большого изображения через небольшую область на экране. Как, например, в картографических сервисах. Чтобы мышью можно было "хватать" изображение и перетаскивать.

На HTML форме делаю так:
<div id="schemeView" style="border: 1px solid #d3d3d3; height: 800px; overflow: hidden;position: relative;"
        ng-mousemove="schemeMouseMove()"
        ng-mousedown="schemeMouseDown()" ng-mouseup="schemeMouseUp()"
        ng-mouseLeave="schemeMouseUp()"
        ng-class="schemeObj.down?'move_cursor':''">
    <div id='scheme' style="position: absolute;">
        <img src="images/width-1500.png">
    </div>
</div>

Небольшие пояснения schemeView это окно, через которое будет отображаться картинка. Внутри img, это сама картинка.

Теперь контроллер:

$scope.schemeObj = {dx: 0, dy: 0, down: false, mousemove: false, cx: 0, cy: 0, currentX: 0, currentY: 0};

// это нужно чтобы не появлялся браузерный перенос картинки.

document.ondragstart = function () {

    return false

}

// этот блок постоянно сохраняет текущие координаты мыши в нашу структуру

$('#schemeView').mousemove(function (e) {

    $scope.schemeObj.currentX = e.pageX;

    $scope.schemeObj.currentY = e.pageY;

});

// при нажатии кнопки мыши установим флаг что нажали и сохраним 

// координаты мыши на момент нажатия

$scope.schemeMouseDown = function () {

    $scope.schemeObj.down = true;

    $scope.schemeObj.cy = $scope.schemeObj.currentY;

    $scope.schemeObj.cx = $scope.schemeObj.currentX;

    event.preventDefault();

}

// отпускаем кнопку мыши - снимаем флаг нажатия

$scope.schemeMouseUp = function () {

    $scope.schemeObj.down = false;

}

// перемещение мыши над нашим окном. Я на всякий случай предотвращаю 

// повторный заход в эту функцию. То есть, чтобы функция отработала до конца 

// и уже потом можно будет зайти в неё повторно. Затем пересчитываем и устанавливаем

// новые координаты у картинки.

$scope.schemeMouseMove = function () {

    if (!$scope.schemeObj.down || $scope.schemeObj.mousemove) return;

    $scope.schemeObj.mousemove = true;

    $scope.schemeObj.dy -= $scope.schemeObj.currentY - $scope.schemeObj.cy;

    $scope.schemeObj.dx -= $scope.schemeObj.currentX - $scope.schemeObj.cx;

    jQuery('#scheme').css({'top': -$scope.schemeObj.dy + 'px', 'left': -$scope.schemeObj.dx});

    $scope.schemeObj.cy = $scope.schemeObj.currentY;

    $scope.schemeObj.cx = $scope.schemeObj.currentX;

    $scope.schemeObj.mousemove = false;

}

Это то, как реализовал я. Здесь нет ограничения на перемещение картинки. Но это уже просто.