angularjs - Angular image zoom always in center -

i have directive. there zoom on scroll image , can drag image. need, image default on center (div or screen) , image should on center when zoommed of mouse wheel. generally, center of image should on center of screen (and can drag image 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="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div ng-app="app">           <img my-draggable src="http://www.singhsatya.com/wp-content/uploads/2014/06/hello_world.png" style="width:{{updatesize}}%; top:{{updatey}}px; left:{{updatex}}px; position:relative; cursor:pointer;">               </div>

wrap img in canvas , use transform: scale zoom in/out.

/* jshint -w117 */  var app = angular.module('app', []);    function zoomcontroller(zoomtype, updatesize) {    if (zoomtype == 1 && updatesize > 550) {      return updatesize;    } else if (zoomtype === 1 && updatesize < 550) {      return updatesize * 1.09;    } else if (zoomtype === 0 && updatesize > 20) {      return updatesize / 1.09;    } else {      return updatesize;    }  }    app.directive('mydraggable', ['$document', '$timeout', function ($document, $timeout) {    return function (scope, element) {      var startx = 0,        starty = 0,        x = 0,        y = 0;      scope.updatex = 0;      scope.updatesize = 100;      /* 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);      }    };  }]);

.my-canvas {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%,-50%);  }    .my-canvas > img {    position:relative;     cursor:pointer;    transition: 0.25s transform;  }

<!doctype html>  <html>    <head>    <script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>    <link rel="stylesheet" href="style.css" />    <script src="script.js"></script>  </head>    <body>    <div ng-app="app">      <div class="my-canvas">                  <img my-draggable           src="http://www.singhsatya.com/wp-content/uploads/2014/06/hello_world.png"          style="transform: scale({{updatesize / 100}}); top:{{updatey}}px; left:{{updatex}}px;">                </div>      </div>  </body>    </html>