Issue Setting ngImgCrop to Image URL

Question

According to the documentation, I should be able to set the image property of the ngImgCrop directive to an image URL, instead of to a data url. However, it does not seem to be working. I have a input text box (for the user to enter the image's url), and a button, which triggers the update of ngImgCrop's source image for cropping. Here is my code so far:

Here is the definition of the ngImgCrop Element

<img-crop 
         image="myImage" 
         result-image-size="300" 
         area-type="square" 
         area-min-size="40" 
         result-image="product.ImageString"></img-crop>

Here is the AngularJS in the app.js

var handleUrlSelect = function getImageDataURL(evt) {
    var url = (document.querySelector('#inputImageUrl')).value;
    $scope.myImage = url;
};

angular.element(document.querySelector('#selectUrl')).on('click', handleUrlSelect);

The current behavior is that the source image is not being set at all. Any help would be appreciated! Thanks!