title: Ionic- display picture taken with camera on same page
body: <p>I'm trying to display image captured through camera on the same page without visiting phone's memory. Somewhat like watsapp, the way we click and upload right away from there only. So, it is like we capture something and display it automatically on the same page, where we have capture button. </p>
  
  <pre><code> .controller('CameraCtrl', function($scope, $cordovaCamera) {
  
    document.addEventListener("deviceready", function () {
  
      var options = {
        quality: 50,
        destinationType: Camera.DestinationType.DATA_URL,
        sourceType: Camera.PictureSourceType.CAMERA,
        allowEdit: true,
        encodingType: Camera.EncodingType.JPEG,
        targetWidth: 100,
        targetHeight: 100,
        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);
  
  }) 
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code> .state('tab.detail', {
    url: '/new-order/id',
    views: {
      'tab-new': {
        templateUrl: 'templates/detail.html',
        controller: 'DetailCtrl'
      }
    }
  })
  
  .state ('camera',{
    url:'/camera',
    templateUrl: 'templates/detail.html',
    controller:'CameraCtrl'
  })
  </code></pre>
  
  <p>html</p>
  
  <pre><code>       &lt;ion-content&gt;
           &lt;div&gt;
             &lt;div class="col text-right"&gt;
               &lt;p&gt;
                 &lt;a href="#/camera" class="camera-icon" &gt;&lt;i class="icon ion-camera"&gt;&lt;/i&gt;&lt;/a&gt;
               &lt;/p&gt;
             &lt;/div&gt;
        &lt;p&gt;
          &lt;img ng-src="image.src" /&gt;
        &lt;p&gt;
     &lt;/div&gt;
   &lt;/ion-content&gt;
  </code></pre>