Angular image zoom always in center

I have the directive. There is zoom on scroll image and also you can drag image. I need, that image by default always be on the center (div or screen) and image also should be on center when you zoommed of your mouse wheel. Generally, center of image always should be on a center of screen (and you can drag image as before).

var app = angular.module('app', []);
app.directive('myDraggable', ['$document', '$timeout', function($document,  $timeout) {
  return function(scope, element, attr) {
    var startX = 0, startY = 0, x = 0, y = 0;
    scope.updateX = 0;
    scope.updatesize = 50;
   // scope.topsize = 1;
   
    function zoomController (zoomtype, updatesize) {
      var default_scale = 50;
      var zoomtype = zoomtype;
      var updatesize = updatesize;
      if (zoomtype == 1 && updatesize > 150) {
          return updatesize;
      } else if (zoomtype == 1 && updatesize < 150){
          return updatesize = updatesize * 1.02;
      } else if (zoomtype == 0 && updatesize > 20){
          return updatesize = updatesize / 1.02;
      } else {
          return updatesize;
      }
      
    }

    /* mouse wheel */
var doScroll = function (e) {
    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    $timeout(function() {
         if (delta == 1) {
            scope.updatesize = zoomController(1, scope.updatesize);
          } else {
            scope.updatesize = zoomController(0, scope.updatesize);
            
          }
    }, 30);
    e.preventDefault();
};

if (window.addEventListener) {
    window.addEventListener("mousewheel", doScroll, false);
    window.addEventListener("DOMMouseScroll", doScroll, false);
} else {
    window.attachEvent("onmousewheel", doScroll);
}
 /* mouse wheel */
     scope.zoomInImage = function () {
      scope.updatesize = zoomController(1, scope.updatesize);
     }
     scope.zoomOutImage = function () {
      scope.updatesize = zoomController(0, scope.updatesize);
     }

    element.on('mousedown', function(event) {
      // Prevent default dragging of selected content
      event.preventDefault();
      startX = event.pageX - x;
      startY = event.pageY - y;
      $document.on('mousemove', mousemove);
      $document.on('mouseup', mouseup);
    });

    function mousemove(event) {
      y = event.pageY - startY;
      x = event.pageX - startX;

      scope.updateX = x;
      scope.updateY = y;

      scope.$apply();

      element.css({
        top: y + 'px',
        left:  x + 'px'
      });
    }

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

<script src="http://ift.tt/1mQ03rn"></script>
<div ng-app="app">
    
   <img my-draggable src="http://ift.tt/19bquau" style="width:{{updatesize}}%; top:{{updateY}}px; left:{{updateX}}px; position:relative; cursor:pointer;"> 
    
    
</div>