title: AngularJS Image Preview before Upload showing previous image selected
body: <pre><code>    myApp.directive('fileModel', ['$parse', function($parse) {
      return {
        restrict: 'A',
        link: function($scope, element, attrs) {
      var model = $parse(attrs.fileModel);
      var modelSetter = model.assign;
      element.bind('change', function(e) {
        $scope.$apply(function(e) {
          modelSetter($scope, element[0].files[0]);
        });
        $scope.setimage();
      });
    }
  </code></pre>
  
  <p>The above code is my directive.</p>
  
  <p>In the function $scope.setimage()</p>
  
  <pre><code>     $scope.setimage = function() {
    var file = $scope.myFile;
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e) {
      $scope.ImageSrc = e.target.result;
    }
  }
  </code></pre>
  
  <p>Whenever i choose the file,</p>
  
  <pre><code>  &lt;img width= 250 height=350 ng-src="{{ImageSrc}}"/&gt;
    &lt;input type=`enter code here`"file" file-model="myFile"/&gt;
  </code></pre>
  
  <p>Immediately the preview is not appearing. When i choose the second time, the preview for the previously selected image file is appearing. Not sure what is wrong.</p>