Zooming over mouse pointer location

http://angularjs.org/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.3/angular.min.js"></script>
<div class="wrapper" data-ng-controller="mainCtrl">
    <div class="c-zoom"></div>
</div>

CSS

body {
      min-height:100%
  }
  .wrapper {
      border:solid 0px red;
      width:100%;
      position:relative;
      height:300px;
      overflow: auto;
      background:red
  }
  .c-zoom {
      /* uncomment this line
    transition:all .3s;
    */
      height:300px;
      width:100%;
      position:absolute;
      background: #74bee8;
      overflow:hidden;
      -webkit-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
      transform-origin: 0 0;
  }
  .c-zoom > img {
      width:100%; 
  }

JavaScript

var app = angular.module('app', []);


app.controller('mainCtrl', ['$scope', function (scope) {
    scope.name = 'super hero';
}]);


app.directive('cZoom', [function () {

    //region - - - - - - - - - - - - - - - - - - - - - - - - - - - - - applyTransform
    function applyTransform(el, transform) {
        el.style.webkitTransform = transform;
        el.style.mozTransform = transform;
        el.style.transform = transform;
    }
    //endregion



    return {
        restrict: 'EC',
        replace: true,
        template: '<div><img src="http://www.publicdomainpictures.net/pictures/60000/velka/beach-1375595507fMI.jpg"</div>',
        scope: {

        },
        link: function (scope, elem, attrs) {

            //var transform = 'matrix(' + scale + ',0,0,' + scale + ',' + translateX + ',' + translateY + ')';
            var el, scale, parentRect, oldScale, rect, transform;
            el = elem[0];
            scale = 1;
            transform = 'matrix(' + 1 + ',0,0,' + 1 + ',' + 0 + ',' + 0 + ')';

            setTimeout(function () {
                rect = el.getBoundingClientRect();
            }, 0);


            //region - - - - - - - - - - - - - - - - - - - - - - - - - - - - - mouseWheel event


            if (el.addEventListener) {
                el.addEventListener("click", mouseWheelHandler, false);
//                el.addEventListener("mousewheel", mouseWheelHandler, false);
//                el.addEventListener("DOMMouseScroll", mouseWheelHandler, false);
            }
            scope.$on('$destroy', function () {
                removeEventListener('mousewheel', mouseWheelHandler);
                removeEventListener('DOMMouseScroll', mouseWheelHandler);
            });



            function mouseWheelHandler(e) {

                var e = window.event || e; // old IE support

                var pgX = e.pageX,
                    pgY = e.pageY;
                console.log(pgX, pgY);
                parentRect =...