Ionic / Angular JS - Display Picture after selecting it using ngCordova Camera Plugin

Question

I am developing an App using Ionic / Angular JS. In a specific page I am using ngCordova Camera Plugin to allow users to select a picture from the phone's gallery. Now, I don't know how to display the picture in the page after the app user selects a picture. Here is the HTML code:

<div class="row">
  <div class="select-photo" ng-click="selectPicture()">Select Picture</div>
  <div class="photo-display"> <!-- Display Photo Here --> </div>
</div>

And here is the Controller JS that I am using for the specific tab:

.controller('PetitionsCtrl', function($scope, $cordovaGeolocation, $cordovaCamera, $log, $ionicLoading, $http, $timeout, $compile) {

    document.addEventListener("deviceready", function () {

      $scope.selectPicture = function() {

        var options = {
          quality: 90,
          destinationType: Camera.DestinationType.DATA_URL,
          sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
          allowEdit: false,
          encodingType: Camera.EncodingType.JPEG,
          popoverOptions: CameraPopoverOptions,
          saveToPhotoAlbum: false,
            correctOrientation: true
        };

        $cordovaCamera.getPicture(options).then(function(imageData) {
          var image = document.getElementById('myImage');
          image.src = "data:image/jpeg;base64," + imageData;
        }, function(err) {
          // error
        });
      }

  }, false);

})

Someone can help me?

Answer 1

I used cordova (ionic) long time ago, but I suppose you have answer in your code :)

in function '.then' you are fetching image html element

var image = document.getElementById('myImage');

and injecting real image source uri

 image.src = "data:image/jpeg;base64," + imageData;

So you only need to add to your html code img element with proper id:

<div class="row">
  <div class="select-photo" ng-click="selectPicture()">Select Picture</div>
  <img id="myImage"/>
</div>