title: How to really prevent an element from being put into the DOM with angularjs
body: <p>Let's say you have the following code to display some products images:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li ng-repeat="p in products"&gt;
      &lt;img ng-src="/images/{{p.img}}"/&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Now let's say some products unfortunately don't have images, you may fix that with:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li ng-repeat="p in products"&gt;
      &lt;img ng-hide="p.img==undefined" ng-src="/images/{{p.img}}"/&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Now go to the "network" tab of firebug or chrome developer tools and check for the images download -- you will see errors, because the browser still tried to download the non-existent image. It's hidden and the users won't notice, but of course it's bad: bad practice, bad for server performance, bad bad bad...</p>
  
  <p>What is the correct "angular" solution for this?</p>