How to update AngularJS view when the value has not changed?

Question

In my view I diplay a photo from the user's profile, in my view I have:

 <img src="{{user.photo.pathRelative}}"/><br/>

When user uploads new photo it is uploaded to the server and the picture at the path is updated. The result is that the data of the picture is changed, however, the user.photo.pathRelative stays the same. This is the reason why the picture in the view does not change.

Any ideas how I can enforce the view to refresh the picture even if the value on the model is not changed (but the data undeneath is changed)?

Answer 1

You need to be using ng-src (just an FYI).

 <img ng-src="{{user.photo.pathRelative}}{{randomStr}}"/><br/>

And then you set random string after the upload.

$scope.randomStr  = '?randomStr=' +  new Date().getTime();

The downside is this will not work after refresh...

---

You could also combine the two if you want like @Tom mentioned below. I do not like doing this, bc you are modifying potentially an "object" that could be saved. For instance if you are using ng-resource and you modified pathRelative and then $save, it would result in the pathRelative being updated in the database.

Answer 2

The problem is that the image is cached. To fix this, you could set pathRelative to the path + the current date, like:

$scope.user.photo.pathRelative = "/somePath?" + new Date().getTime();

And update that when it changes