How to get uploadcare widget in angularjs to update with model changes

Question

I am using this uploadcare widget in my angularjs app although when I use an angular model as the value for an attribute in the app, the uploadCare widget isn't effected.

Everything works except for the "derp" value, which I suspect is changed after the "uploadcare-widget" is made.

<div id="container" ng-controller='ContainerCtrl' ng-init="derp='1:1'">
    <input
    class="field-input"
    uploadcare-widget
    data-public-key="******"
    ng-model="sigInput.imageUrl"
    data-tabs="file url"
    data-images-only="true"
    data-preview-step="true"
    data-clearable="true"
    data-multiple="false"
    data-crop="{{derp}}"
    data-image-shrink="4x4"
    on-upload-complete="onUCUploadComplete(info)"
    on-widget-ready="onUCWidgetReady(widget)"
    value="{{sigInput.imageUrl}}"
   />

   data-crop value: <input ng-model="derp"></input>

Answer 1

The reason for it is that Uploadcare widget is created once, and it doesn't update itself, if input attrs change in the future.

You can try to recreate it when you want to change cropping (or other) config: http://jsbin.com/vetibu/1/watch?html,js,output