controller.js

controllers.CanvasCtrl = function ( $scope, $timeout, CanvasService ) {

   $scope.onStart = function () {
      $scope.pageNumber = $scope.data.pageNumber;
      $scope.velocity = 0;
      $scope.damping = 0.002;
      $scope.repeat = false;
   }

   $scope.onDrag = function () {
      calcPageNumber(  Math.abs( $scope.diffX ) * 0.02);
      applyPageNumber();
   }

   $scope.onUp = function () {
      $scope.repeat = ($scope.velocity != 0);
      $scope.timeout = $timeout( $scope.onTimeout, 100 );
   }

   $scope.onTimeout = function () {
      calcPageNumber( $scope.velocity -= $scope.damping);
      applyPageNumber();

      if ($scope.velocity <= 0
         || $scope.diffX > 0 && $scope.data.pageNumber ===  $scope.data.totalPages
         || $scope.diffX < 0 && $scope.data.pageNumber ===  1) {
         $scope.repeat = false;
      }

      if ($scope.repeat) {
         $scope.timeout = $timeout( $scope.onTimeout, 10 );
      }

      else {
         console.log( "stopped" );
      }

   }  

   function calcPageNumber(velocity) {
      var limitedV = Math.min( 1, velocity )
      $scope.pageNumber = ($scope.diffX > 0) ? $scope.pageNumber + limitedV : $scope.pageNumber - limitedV ;
      $scope.velocity = velocity;
   }

   function applyPageNumber() {
      var rounded = parseInt( $scope.pageNumber );
      if (rounded != $scope.data.pageNumber) {
         $scope.data.pageNumber = rounded;
         CanvasService.redraw();
      }
   }

   
}

directive.js

.directive( 'pipitdrag', [function () {
      return {
         restrict: 'A',
         link: function ( scope, element, attribs ) {

            var onMouseDown = function (event){
               scope.previousX = event.pageX;
               scope.diffX = 0;
               scope.mouseDown = true;
               element.bind( 'mousemove', onMouseMove);
               element.bind( 'mouseup', onMouseUp);
               element.bind( 'mouseout', onMouseUp);

               if (scope.onStart != null) {
                  scope.onStart();
               }
            }


            var onMouseMove = function(event){
               scope.diffX = event.pageX - scope.previousX;
               scope.previousX = event.pageX;

               if (scope.onDrag != null) {
                  scope.onDrag();
               }
            }

             var onMouseUp = function(event){
                scope.mouseDown = false;
                element.unbind( 'mousemove', onMouseMove);
                element.unbind( 'mouseup', onMouseUp);
                element.unbind( 'mouseout', onMouseUp);

                if (scope.onUp != null) {
                   scope.onUp();
                }
             }

            element.bind( 'mousedown', onMouseDown);
         }
      }

   }] )

partial.html

<div class="span9" draggable="false">
    <div map="canvasContainer" draggable="false"  ng-controller="ImageCtrl" class="row-fluid" >
       <canvas id="handle" draggable="false" pipitdrag="" map="canvas" ng-controller="CanvasCtrl" />
    </div>
</div>