title: How to hide broken images in Angular app
body: <p>I've built an Angular app that utilizes the Instagram API to pull in images. If a user later deletes an image I end up with broken images (404's).
  I've attempted to use jQuery to hide the div containing these (broken) images, but they still appear.</p>
  
  <p>I've placed the following jQuery in a 'custom.js' file that I reference in my 'index.html' file:</p>
  
  <pre><code>$(document).ready(function() {
      $("img").error(function() {
          $(this).parent().hide();
      });
  });
  </code></pre>
  
  <p>I reference jQuery then 'custom.js' in the head of 'index.html' as follows:</p>
  
  <pre><code>&lt;script src="libs/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/custom.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>...and here is the html I'm attempting to apply this jQuery to:</p>
  
  <pre><code>&lt;a ng-href="{{image.link}}" target="_blank" title="{{image.text}}"&gt;&lt;img ng-src="{{image.img}}" alt="" class="img-responsive" ng-style="homeColors" id="image"&gt;&lt;/a&gt;
  </code></pre>