使用带有角度文件上传的JQuery裁剪器插件

Question

我正在尝试在上传图像后裁剪图像。我正在使用Jquery Cropper插件。我可以在使用静态图像时裁剪，但是我无法让裁剪器显示在已上传的图像上。如何在图片上传后初始化图像？

JSFiddle

HTML

<input type='file' ng-model-instant onchange="angular.element(this).scope().imageUpload(this)" />
  <br>
 <div class="cropper-example-1">
   <img ng-src="{{ img_url }}">
 </div>
 <br><br><br>
 <h4>Static Working example</h4>
 <div class="cropper-example-2">
   <img src="http://i.imgur.com/86S751Y.jpg">          
 </div>

JS

function MyCtrl($scope) {
  $scope.imageUpload = function(element){
    var reader = new FileReader();
    reader.onload = $scope.imageIsLoaded;
    reader.readAsDataURL(element.files[0]);
  }

  $scope.imageIsLoaded = function(e){
    $scope.$apply(function() {
      $scope.img_url = e.target.result;
      $('.cropper-example-1 > img').cropper({
          aspectRatio: 16 / 9,
          autoCropArea: 0.65,
          strict: false,
          guides: false,
          highlight: false,
          dragCrop: false,
          cropBoxMovable: false,
          cropBoxResizable: false
      });
    });
  }
  $('.cropper-example-2 > img').cropper({
      aspectRatio: 16 / 9,
      autoCropArea: 0.65,
      strict: false,
      guides: false,
      highlight: false,
      dragCrop: false,
      cropBoxMovable: false,
      cropBoxResizable: false
  });
}