Image is not changing even i changed image

Question

In angularjs if i change or remove image it does not make any changes. After refreshing the page it show the changed image.I am using following line to remove image

Answer 1

If you want to manipulate the DOM in AngularJS you should use directives for this purpose.

You should avoid using jquery inside of your controllers and simply work with your model. Below is fileUpload directive that could help you to work with in a more angularjs-way:

angular.module('myApp', [])
.controller('TestController', ['$scope', function ($scope) {
    var ctrl = this;
    
    ctrl.imageFile = null;
    ctrl.clearFile = clearFile;
    
    function clearFile(){
      ctrl.imageFile = null;
    }
    
    $scope.$ctrl = ctrl;
}])
.directive('fileUpload', [function () {
  return {
    require: "ngModel",
    restrict: 'A',
    link: function ($scope, el, attrs, ngModel) {
      function onChange (event) {
        //update bindings with $applyAsync
        $scope.$applyAsync(function(){
          ngModel.$setViewValue(event.target.files[0]);
        });
      }
      //change event handler
      el.on('change', onChange);
      
      //set up a $watch for the ngModel.$viewValue
      $scope.$watch(function () {
        return ngModel.$viewValue;
      }, function (value) {
        //clear input value if model was cleared
        if (!value) {
          el.val("");
        }
      });
      //remove change event handler on $destroy
      $scope.$on('$destroy', function(){
        el.off('change', onChange);
      });
    }
  };
}]);

  

    
    
    

      {{$ctrl.imageFile.name}}

      {{$ctrl.imageFile.size}} byte(s)

      {{$ctrl.imageFile.type}}
    
  

UPDATE: Also take a look at this useful reading.