Error Setting ngImgCrop url for image

According to the documentation, I have to set the image property of the ngImgCrop directive to the image url, not the data url. However, it doesn't seem to work. I have a text input box (for the user to enter the url of the image) and a button that triggers an update of the original ngImgCrop image to crop. Here is my code:

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 AngularJS in 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 original image is not set at all. Any help would be appreciated! Thank!