display image from image gallery in android using ionic framework

Question

Hello i am trying to develop Android app to load images from images gallery. Here is code snipet. i am not able display image. Can some one point me where it went wrong?

*.html

<ion-view title="Account">
  <ion-content class="has-header padding">
    <h1>Upload Image</h1>
      <div class="account-picture">
          <button ng-click="ShowPictures()">Select Picture</button>
          <img src="ImageURI" id="smallimage">
          <input type="text" ng-model="ImageURI" size="30"/>
      </div>
  </ion-content>
</ion-view>

Controller.js

.controller('AccountCtrl', function($scope) {

    $scope.ImageURI = 'Select Image';
    function UploadPicture(imageURI) {

        $scope.ImageURI =  imageURI;
        alert($scope.ImageURI );
    }

    $scope.ShowPictures = function() {
        navigator.camera.getPicture(UploadPicture, function(message) {
                alert('get picture failed');
            }, {
                quality: 50,
                destinationType: navigator.camera.DestinationType.FILE_URI,
                sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
            }
        );
    };
});

Here ia ImageURI i am receiving afetr selecting any file from image gallery:content://media/external/images/media/17. I blindly hard coded this value for my image src. But I am not seeing any. Any inputs here?

Also, the ImageURI is not binding for my text box too. Alert is display URI properly.

Its seeme pretty straight forward using normal phonegap app. But w/ ionic framework i am not abel to.

Answer 1

you need to call $scope.$apply(); to tell angular your async function is finished. Also

$scope.ImageURI =  imageURI;
$scope.$apply(); 

also - you might get the same problem as I with the image - se my comments above.