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

jQuery

$('#profile_image').val('')

Answer 1

This Sample is basic if you want to know more about AngularJs click on link

var app = angular.module("app", []);

app.controller("ctrl", [
  "$scope",
  function($scope) {
    $scope.imgShow = true;
    $scope.imgSrc = "https://www.gravatar.com/avatar/75025ad9a8cfdaa5772545e6e8f41133?s=32&d=identicon&r=PG&f=1";

    $scope.display = function() {
      $scope.imgShow = true;
      $scope.imgSrc = "https://www.gravatar.com/avatar/75025ad9a8cfdaa5772545e6e8f41133?s=32&d=identicon&r=PG&f=1";
    }

    $scope.change = function() {
      $scope.imgSrc = "https://www.gravatar.com/avatar/fccd71b79b3571b459cdfe40e7bf5dd8?s=32&d=identicon&r=PG&f=1";
    }

    $scope.remove = function() {
      $scope.imgShow = false;
    }

  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <img ng-src="{{imgSrc}}" ng-show="imgShow">
  <hr/>
  <button ng-click="display()" ng-hide="imgShow">display image</button>
  <button ng-click="change()">change image</button>
  <button ng-click="remove()">remove image</button>
</div>

Answer 2

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 <input type="file"> 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);
      });
    }
  };
}]);

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.angularjs.org/1.3.20/angular.js"></script>

<div ng-app="myApp">
  <div ng-controller="TestController">
    <input type="file" file-upload ng-model="$ctrl.imageFile" />
    <input type="button" ng-click="$ctrl.clearFile()" value="Reset" />
    <div ng-if="$ctrl.imageFile">
      {{$ctrl.imageFile.name}}<br />
      {{$ctrl.imageFile.size}} byte(s)<br/>
      {{$ctrl.imageFile.type}}
    </div>
  </div>
</div>

UPDATE: Also take a look at this useful reading.