AngularJS doesn't update img src when model changes

Question

I use ng-src to load images. Value is loaded from some scope variable, like this:

Answer 1

call $scope.$apply() after delete $scope.currentReceipt.

Answer 2

This is the expected behaviour from the ngSrc and ngHref directives. These directives only support recognising new paths, but when path is not available, the directives will exit silently (I see a pull request here.).

So a possible workaround could be to use ngShow along with the ngHref to hide the tag altogether when image variable is not available anymore:

<img ng-href="{{currentReceipt.image}}" ng-show="currentReceipt.image" />

Answer 3

You can actually check for length and do

 <img ng-show="user.thumbnail.length > 1" class="img-circle thumb pull-left" ng-src="{{user.thumbnail}}" alt="{{user.firstname}} {{user.lastname}}">

Answer 4

The following solution works for me:

<img ng-src="{{currentReceipt.image}}" ng-show="currentReceipt.image != null" />