Using ng-repeat variable inside src attribute in angularjs? - variables

Question

I have the following:
div.container
script(src='/js/bootstrap/holder.js')
p.text-info(ng-pluralize,
count="devices.length",
when="{ '0': 'There are no fragments.', 'one': 'There is 1 fragment.', 'other': 'There are {} fragments.'}")
ul.unstyled(ng-repeat='fragment in devices')
ul.thumbnails
li.span
div.thumbnail
img(src="holder.js/{{fragment.dimension.width}}x{{fragment.dimension.height}}")
div.caption
h3 {{fragment.name}}
p {{fragment.dimension}}
ul.unstyled(ng-repeat='component in fragment.components')
li {{ component.name }}
The problem is in src="holder.js/{{fragment.dimension.width}}x{{fragment.dimension.height}}", i.e. even if looking at the resulting html I see a correct src (src="holder.js/300x200") it does not show the image. My guess is this is not how one uses angular variables inside attributes..
How can I make it work?
EDIT:
it seems it does not execute holder.js..
here is the source: in the first call I used angular {{hash}} in the second I manually put holder.js/300x200
<div class="thumbnail">
<img src="holder.js/1678x638">
<img src="data:image/png;base64,iVBORw0KG...ElFTkSuQmCC" data-src="holder.js/300x200" alt="300x200" style="width: 300px; height: 200px;">
</div>

Answer 1

The documentation explains that quite clearly:
Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.
So you must use:
<img ng-src="holder.js/{{fragment.dimension.width}}x{{fragment.dimension.height}}" />