Angularjs databinding for uploadcare.com not working

Question

I am trying to integrate script loading in my page. I use 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 set ng-model = "test" and in my controller I have the following:

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

The html code is as follows:

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

When I check Firebug, I see that the widget is working:

 <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 entered into my "$ scope.test". Why is this? When I print $ scope.test, it still says "test" instead of my path to the image path.

Answer 1

You can use $ watch in angular

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

Or a feature provided by uploadcare

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

What is the callback function after loading the image

Answer 2

Please check the volume of the test model. You can also update the scope variable inside the directive, for example

 scope.test = $element.value()