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="myImage" result-image="myCroppedImage" type="square"></img-crop>
</div>
<div>Cropped Image:</div>
<div><img ng-src="{{myCroppedImage}}" /></div>

CSS

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

JavaScript

angular.module('app', ['ngImgCrop'])
        .controller('Ctrl', function($scope) {
            $scope.myImage = '';
            $scope.myCroppedImage = '';

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

        });