AngularJs: ng-img-crop

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
<script src="https://cdn.rawgit.com/alexk111/ngImgCrop/master/compile/minified/ng-img-crop.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/alexk111/ngImgCrop/master/compile/minified/ng-img-crop.css">
<div>Select an image file: 
    <input type="file"
           id="fileInput"
          onchange="angular.element(this).scope().uploadFile(this.files[0])" />
</div>
<div class="cropArea">
    <img-crop image="cropper.myImage" result-image="cropper.myCroppedImage"></img-crop>
</div>

CSS

.cropArea {
  background: #E4E4E4;
  overflow: hidden;
  width:500px;
  height:350px;
}

JavaScript

angular.module('app', ['ngImgCrop'])
        .controller('Ctrl', function($scope) {
            $scope.cropper = {
                myImage: 'http://placehold.it/300x300',
                myCroppedImage: ''
            };

            $scope.uploadFile = function(file) {
                if (file) {
                    // ng-img-crop
                    var imageReader = new FileReader();
                    imageReader.onload = function(image) {
                        $scope.$apply(function($scope) {
                            $scope.cropper.myImage = image.target.result;
                        });
                    };
                    imageReader.readAsDataURL(file);
                }
            };

        });