title: Image can not be displayed after upload using Angular.js
body: <p>I have an issue. I can not display image after selecting using <code>ng-file-upload</code> from Angular.js. I have to upload multiple file here. I am explaining my code below.</p>
  
  <pre><code>&lt;div ng-repeat="mul in mulImage"&gt;
      &lt;div class="input-group bmargindiv1 col-md-12"&gt;
        &lt;span class="input-group-addon ndrftextwidth text-right" style="width:180px"&gt;Image{{$index+1}}:&lt;/span&gt;
        &lt;div&gt;
  
          &lt;input type="file" class="filestyle form-control" data-size="lg" name="upload_{{$index}}" id="bannerimage_{{$index}}" ng-model="file" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="2MB" custom-on-change="uploadFile" ngf-select="onFileSelect($index,$file);"&gt;
          &lt;div style="clear:both;"&gt;&lt;/div&gt;
  
        &lt;/div&gt;
        &lt;span class="input-group-btn" ng-show="mulImage.length&gt;0"&gt;
        &lt;img ng-src="{{attchImage}}" name="pro" border="0" style="width:32px; height:32px; border:#808080 1px solid;" ng-if="mul.image !=null"&gt;
              &lt;input type="button" class="btn btn-success" name="plus" id="plus" value="+" ng-click="addNewImageRow(mulImage);" ng-show="$last"&gt; &lt;input type="button" class="btn btn-danger" name="minus" id="minus" value="-"  ng-show="mulImage.length&gt;1" ng-click="deleteNewImageRow(mulImage,$index);"&gt;
         &lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>my controller side code is given below.</p>
  
  <pre><code>$scope.uploadFile = function(event) {
      console.log('event', $scope.mulImage.length);
      var files = event.target.files;
      for (var i = 0; i &lt; 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() {
        $scope.attchImage = e.target.result;
      });
    }
  </code></pre>
  
  <p>Here i need after selecting the image it should display inside image tag but failed to do that. <a href="https://plnkr.co/edit/X2l6NIVsN2hak8TQjupV?p=preview" rel="nofollow">Here is my plunkr</a> code. Please help me to resolve this issue.</p>