javascript - Angularjs Image Compress passing value into $scope model -

i ask, came across angular image compress function works great per want. have implement work there 1 problem, compress function returns me base64 encoded image stored in local $scope , can called in html page if not mistaken such.

<td style="width: 15%">     <div class="canvas-wrapper">         <img class="canvas-image" ng-src="<%image1.compressed.dataurl%>"/></div> </td> <td>      <input id="inputimage" ngf-select ng-model="statusdata.file" ngf-multiple=false type="file" accept="image/*" image="image1" resize-max-height="800" resize-max-width="800" resize-quality="0.5" resize-type="png" />  </td> 

in order me compressed image have echo base64 code calling <%image1.compressed.dataurl%>

now problem how should pass value $scope model have created store value? tried doing like

<%$scope.imagecache.data = image1.compressed.dataurl%> did not work.

i need conpressed data passed custom module can perform other actions image.

here demo of code working code

hopefully can me in such scenario.

update 1: found temporary cheating workaround calling ng-click="image1 = null" when user click on icon.

ng-src directive evaluates content. should provide value $scope.

<img class="canvas-image" ng-src="image1.compressed.dataurl"/> 

this provide data given in $scope.image1.compressed.dataurl have correct data.

so without using ng-src

<img class="canvas-image" src="{{image1.compressed.dataurl}}"/> 

or modified interpolation symbols

<img class="canvas-image" src="<%image1.compressed.dataurl%>"/>