angularjs databinding for uploadcare.com doesnt work

Question

I'm trying to integrate an upload script into my page. Im using uploadcare.com. They provided a simple directive but I just can't get it to work:

https://github.com/uploadcare/angular-uploadcare/blob/master/angular-uploadcare.js

I'm setting ng-model="test" and in my controller I have the following:

angular.module('testApp')
  .controller('MyCtrl', function ($scope) {
    $scope.test = "test";
  });

The html code looks like that:

<uploadcare-widget ng-model="test" data-public-key="xyz" />

When I check Firebug I can see that the widget works:

<input type="hidden" role="uploadcare-uploader" ng-model="test" data-public-key="6e0958899488d61fd5d0" data-crop="1200:630" value="http://www.ucarecdn.com/ca5513da-90f1-40d1-89e7-648237xxxxxx/-/crop/2560x1344/0,128/-/preview/" class="ng-isolate-scope ng-valid">

But this input value is never populated back to my "$scope.test". Why is that? When I output $scope.test it still says "test" instead of my image path value.

Answer 1

You can use $watch in angular

$scope.$watch('test', function(newValue, oldValue) {
    console.log($scope.test);
});

Or the function provided by uploadcare

$scope.onUCUploadComplete = function(info){
  console.log(info);
}; 

Which is a callback function after image is uploaded

Answer 2

Please check the scope of test model. You can also update scope variable inside directive like

scope.test = $element.value()