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:

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

My issue is that when I run delete $scope.currentReceipt, it makes ng-src attribute empty but doesn't reflect it in src attribute. So as a result I keep seeing that image where I need empty placeholder.

How can I deal with it?

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" />