Forcing a ng-src reload - angularjs

Question

How can I force angularjs to reload an image with an ng-src attribute, when the url of the image has not changed, but its contents has?
<div ng-controller='ctrl'>
<img ng-src="{{urlprofilephoto}}">
</div>
An uploadReplace service that performs a file upload, is replacing the content of the image, but not the url.
app.factory('R4aFact', ['$http', '$q', '$route', '$window', '$rootScope',
function($http, $q, $route, $window, $rootScope) {
return {
uploadReplace: function(imgfile, profileid) {
var xhr = new XMLHttpRequest(),
fd = new FormData(),
d = $q.defer();
fd.append('profileid', profileid);
fd.append('filedata', imgfile);
xhr.onload = function(ev) {
var data = JSON.parse(this.responseText);
$rootScope.$apply(function(){
if (data.status == 'OK') {
d.resolve(data);
} else {
d.reject(data);
}
});
}
xhr.open('post', '/profile/replacePhoto', true)
xhr.send(fd)
return d.promise;
}
}
}]);
When the uploadReplace returns, I don't know how I can force the image to reload
app.controller('ctrl', ['$scope', 'R4aFact', function($scope, R4aFact){
$scope.clickReplace = function() {
R4aFact.uploadReplace($scope.imgfile, $scope.pid).then(function(){
// ?? here I need to force to reload the imgsrc
})
}
}])

Answer 1

An easy workaround is to append a unique timestamp to ng-src to force image reload as follows:
$scope.$apply(function () {
$scope.imageUrl = $scope.imageUrl + '?' + new Date().getTime();
});
or
angular.module('ngSrcDemo', [])
.controller('AppCtrl', ['$scope', function ($scope) {
$scope.app = {
imageUrl: "http://example.com/img.png"
};
var random = (new Date()).toString();
$scope.imageSource = $scope.app.imageUrl + "?cb=" + random;
}]);

Answer 2

Perhaps it could be as simple as adding a decache query string to the image URL? ie.
var imageUrl = 'http://i.imgur.com/SVFyXFX.jpg';
$scope.decachedImageUrl = imageUrl + '?decache=' + Math.random();
This should force it to reload.

Answer 3

An "angular approach" could be creating your own filter to add a random querystring parameter to the image URL.
Something like this:
.filter("randomSrc", function () {
return function (input) {
if (input) {
var sep = input.indexOf("?") != -1 ? "&" : "?";
return input + sep + "r=" + Math.round(Math.random() * 999999);
}
}
})
Then you can use it like this:
<img ng-src="{{yourImageUrl | randomSrc}}" />

Answer 4

Try This
app.controller('ctrl', ['$scope', 'R4aFact', function($scope, R4aFact){
$scope.clickReplace = function() {
R4aFact.uploadReplace($scope.imgfile, $scope.pid).then(function(response){
$scope.urlprofilephoto = response + "?" + new Date().getTime(); //here response is ur image name with path.
});
}
}])

Answer 5

I resorted to make a directive to put random param in the src, but only if the image changes, so I don't mess that much with the caching.
I use it to update the user's profile pic in the navbar when they update it via AJAX, which doesn't happen that often.
(function() {
"use strict";
angular
.module("exampleApp", [])
.directive("eaImgSrc", directiveConstructor);
function directiveConstructor() {
return { link: link };
function link(scope, element, attrs) {
scope.$watch(attrs.eaImgSrc, function(currentSrc, oldSrc) {
if (currentSrc) {
// check currentSrc is not a data url,
// since you can't append a param to that
if (oldSrc && !currentSrc.match(/^data/)) {
setSrc(currentSrc + "?=" + new Date().getTime());
} else {
setSrc(currentSrc);
}
} else {
setSrc(null);
}
})
function setSrc(src) { element[0].src = src; }
}
}
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="exampleApp">
<div>
<img ea-img-src="src"></img>
</div>
<button ng-click="src = 'http://placehold.it/100x100/FF0000'">IMG 1</button>
<button ng-click="src = 'http://placehold.it/100x100/0000FF'">IMG 2</button>
<button ng-click="src = 'http://placehold.it/100x100/00FF00'">IMG 3</button>
</div>