Image Crop (with thumbnail) - straight from an image URL

Angular Image Crop using ngImgCrop

HTML

<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">
<body ng-app="app" ng-controller="Ctrl">
  
  <div class="cropArea">
    <img-crop image="myImage" result-image="myCroppedImage" on-change="onChange($dataURI)"></img-crop>
  </div>
  <div>Cropped Image:</div>
  <div><img ng-src="{{myCroppedImage}}" /></div>
    <div><img ng-src="{{myThumbNailImage}}" /></div>
</body>

CSS

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

JavaScript

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