How to display image after selecting using Angular.js

Question

I need one help.I have one image icon, when user will select that icon the file dialog will open and user will select the image.After selecting the image the image should display on that image icon.I am explaining my code below.

<div class="image-upload">
  <label for="bannerimage">
   <img src="{{attachImage}}"/>
  </label>
  <input type="file"  data-size="lg" name="bannerimage" id="bannerimage"  ng-model="file" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="2MB" ngf-min-height="100" ngf-resize="{width: 100, height: 100}"  custom-on-change="uploadFile" required="required" ngf-select="onFileSelect($file);"  ngf-multiple="true">
</div>

my controller side code is given below.

$scope.attachImage="upload/logo.png";
$scope.uploadFile = function(event){
  console.log('event',event.target.files);
  var files = event.target.files;
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var reader = new FileReader();
    reader.onload = $scope.imageIsLoaded; 
    reader.readAsDataURL(file);
  }
};

$scope.imageIsLoaded = function(e){
  $scope.$apply(function() {
    //var data={'image':e.target.result};
    // $scope.stepsModel.push(data);
    //$scope.myImage=e.target.result;
    $scope.attachImage='';
    $scope.attachImage=$scope.myImage;
  });
});

Here i need when user will select the image the image will display on that particular image icon.Please help me.

Answer 1

I believe you need to use reader.onloadend instead of reader.onload

reader.onloadend = function () {
    // set $scope.attachImage to reader.result;
  }