title: Angular Image drag and resize
body: <p>hi I have this <a href="http://plnkr.co/edit/qrbXecSqvNKcZKUslJ5V?p=preview" rel="nofollow">plunkr</a> that has draggable image what I need is i want to add resizable property </p>
  
  <p>this is my html</p>
  
  <pre><code>        Size &lt;input type="number" ng-model="updatesize"&gt;
          Position X &lt;input type="number" ng-model="updateX"&gt;
          Positon Y &lt;input type="number" ng-model="updateY"&gt;
          &lt;div style ="width:900px; height:400px; background-color:red"&gt;  
  
              &lt;img my-resize  my-draggable src="../coffee.jpg" style="width:{{updatesize}}px; top:{{updateY}}px; left:{{updateX}}px; position:relative; cursor:pointer"&gt;
  
          &lt;div&gt;
  </code></pre>
  
  <p>this is my script.js</p>
  
  <pre><code>angular.module('myApp', [])
  .controller('mainController',['$rootScope', '$scope', function($rootScope, $scope) {
  
  
  
    $scope.updatesize = 250;
    $scope.updateX = 60;
    $scope.updateY = 70;
  }])
  
  .directive('myDraggable', ['$document', function($document) {
    return function(scope, element, attr) {
      var startX = 0, startY = 0, x = 0, y = 0;
  
      element.css({
       position: 'relative',
       width: scope.updatesize + 'px',
       top: scope.updateY + 'px',
       left: scope.updateX + 'px',
       cursor: 'pointer'
      });
  
      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 resize(event){
  
      }
  
  
      function mouseup() {
        $document.off('mousemove', mousemove);
        $document.off('mouseup', mouseup);
      }
    };
  }])
  </code></pre>
  
  <p>when we edit the value in the textbox the image respond to it.</p>
  
  <p>if the resizable is achieved I need to that width pixel value to be the value of size textbox.</p>
  
  <p>could anyone help me please.</p>