There's a service I'm using that returns image URLs, and I call it with the following code:
angular.forEach(results, function (item) {
item.img = "/images/searchItem.jpg";
$http.post("https://my.api.com/?id=" + item.id).success(
function (url) {
item.img = url;
});
});
Previously, I displayed the image using ng-src attribute in my view like this:
<img ng-src="{{item.img}}">
Recently, I decided to use background-image on a SPAN instead:
<span ng-style="{'background':'transparent url({{item.img}})'}"></span>
Now, the flow only works correctly on the first run. After that, despite seeing updated HTML in the console like this:
<span ng-style="{'background':'transparent url(http://expertsimages.liveperson.com/images/rating/rate10.gif)'}" style="background-image: url(https://fb.lp-chat.com/images/searchItem.jpg); background-color: transparent; background-position: initial initial; background-repeat: initial initial;"></span>
the actual HTML remains in its initial state.
I've attempted calling apply/digest on post success, but received a $digest already in progress error (which is understandable). Strangely, after a normal digest cycle triggered by other UI changes, the correct image does appear.
What could be causing this issue?
Update: I've put together a JS fiddle to showcase this problem...it seems like it might be an Angular bug.