title: Pick Image from Gallery or Camera In Ionic and Load it in a ImageView
body: <p>I am new to hybrid mobile app and I want to implement a profile picture updation in my app. Till now I have implemented the following. On clicking a Imageview a dialog pops up and ask you to choose the app (Gallery or Camera). On selecting the desired app I am able to go to the respective app and choose the image. But I a stuck in some point and I dont know how to replace my sample imageview with the new content. Below is my code</p>
  
  <p><strong>profile.html</strong></p>
  
  <pre><code>&lt;ion-view class="profile-view"&gt;
  &lt;ion-nav-title&gt;
      &lt;span&gt;Profile&lt;/span&gt;
  &lt;/ion-nav-title&gt;
  &lt;ion-content&gt;
      &lt;div class="top-content row"&gt;
          &lt;div class="profile-container"&gt;
              &lt;div class="user-image-container"&gt;
                  &lt;pre-img ratio="_1_1" helper-class="rounded-image"&gt;
                      &lt;img class="user-image" ng-src="http://115.115.122.10/vishnu/image/sample.png" ng-click="confirmDialog()"  spinner-on-load&gt;
                  &lt;/pre-img&gt;
              &lt;/div&gt;
              &lt;div class="user-name"&gt;Brynn Evans&lt;/div&gt;
              &lt;div class="user-twitter"&gt;@brynn&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="user-background-image-outer"&gt;
              &lt;div multi-bg="['http://115.115.122.10/vishnu/image/sample.png']"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="bottom-content"&gt;
          &lt;div class="user-bio"&gt;
              &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>controller.js</strong></p>
  
  <pre><code>    .controller('ProfileCtrl', function ($scope, $cordovaDevice, $cordovaFile, $ionicPlatform, $ionicActionSheet, ImageService, FileService, $ionicPopup, $cordovaDialogs) {
      $ionicPlatform.ready(function() {
          $scope.images = FileService.images();
  
          $scope.$apply();
      });
  
      $scope.addpicture = function() {
          $scope.hideSheet = $ionicActionSheet.show({
              buttons: [
                { text: 'Take photo' },
  
                { text: 'Photo from library' }
              ],
              titleText: 'Add images',
              cancelText: 'Cancel',
              buttonClicked: function(index) {
                  $scope.addImage(index);
              }
          });
      }
  
      $scope.showAlert = function () {
  
          var alertPopup = $ionicPopup.alert({
  
              buttons: [
                {
                    text: 'Take photo',
                    onTap: function (index) {  $scope.addImage(index) }
                },
                {
                    text: 'Photo from library',
                    onTap: function (index) { $scope.addImage(index) }
                },
                 {
                     text: 'Cancel',
                     onTap: function (alertPopup) { popup.close(); }
                 }
              ],
  
              title: 'Add Images',
  
          });
  
  
      }
  
      $scope.confirmDialog = function() {
          navigator.notification.confirm("Choose your app to perform the action", function (buttonIndex) {
               var btnIndex = buttonIndex;
               switch (btnIndex) {
                  case 1:
                      $scope.addImage(btnIndex);
                      break;
                  case 2:
                      $scope.addImage(btnIndex);                  
                      break;
  
              }
          }, "Change Profile Picture", ["Take photo", "Photo From Library"]);
      }
  
  
  
  
      $scope.addImage = function(type) {
          ImageService.handleMediaDialog(type).then(function() {
              $scope.$apply();
          });
      }
  
  })
  </code></pre>
  
  <p><strong>services.js</strong></p>
  
  <pre><code>    .factory('FileService', function () {
      var images;
      var IMAGE_STORAGE_KEY = 'dav-images';
  
      function getImages() {
          var img = window.localStorage.getItem(IMAGE_STORAGE_KEY);
          if (img) {
              images = JSON.parse(img);
          } else {
              images = ['http://115.115.122.10/vishnu/image/sample.png'];
          }
          return images;
      };
  
      function addImage(img) {
          images.push(img);
          window.localStorage.setItem(IMAGE_STORAGE_KEY, JSON.stringify(images));
      };
  
      return {
          storeImage: addImage,
          images: getImages
      }
  })
  
  .factory('ImageService', function ($cordovaCamera, FileService, $q, $cordovaFile) {
  
      function optionsForType(type) {
          var source;
          switch (type) {
              case 2:
                  source = Camera.PictureSourceType.PHOTOLIBRARY;
                  break;
              case 1:
                  source = Camera.PictureSourceType.CAMERA;
                  break;
          }
          return {
              quality: 90,
              destinationType: Camera.DestinationType.DATA_URL,
              sourceType: source,
              allowEdit: false,
              encodingType: Camera.EncodingType.JPEG,
              popoverOptions: CameraPopoverOptions,
              saveToPhotoAlbum: false,
              correctOrientation: true
          };
      }
  
      function saveMedia(type) {
          return $q(function (resolve, reject) {
              var options = optionsForType(type);
  
              $cordovaCamera.getPicture(options).then(function (imageBase64) {
                  FileService.storeImage(imageBase64);
              });
          })
      }
      return {
          handleMediaDialog: saveMedia
      }
  })
  </code></pre>
  
  <p>Can anybody please help me to implement my functionality.</p>
  
  <p>Thanks in advance</p>