Dynamic file name with AngularJS shows JSHint error
<p>My DOM with AngularJS has the following element...</p>

<pre><code>&lt;img class="optional" src="assets/img/{{ctrl.optional}}.png" ng-click="ctrl.clickOptional()"&gt;
</code></pre>

<p>The image is generated dynamically when the page is loaded. When I click on this image, the function <code>clickOptional()</code> in my controller run perfectly changing the image.</p>

<p>The issue is, when the browser load my page, the console show the following error:</p>

<pre><code>http://localhost:8787/public/assets/img/%7B%7Bbctrl.optional%7D%7D.png Failed to load resource: the server responded with a status of 404 (Not Found)
</code></pre>

<p>I know this occur because the DOM structure is checked before than AngularJS be loaded. </p>

<p>Are there some workaround to fix it? What's the best way to do it?</p>