title: Detect when image has finished rendering on screen
body: <p>This is essentially my HTML. It is part of a responsive design so I cannot rely on fixed widths/heights:</p>
  
  <pre><code>&lt;img ng-src="{{imageSrc}}" /&gt;
  </code></pre>
  
  <p>The value of <code>$scope.imageSrc</code> is changed inside my controller and the view is updating properly.</p>
  
  <p>But: At the point of time the image has finished rendering I need to get its <code>clientWidth</code> and <code>clientHeight</code> properties.</p>
  
  <p>So how can I detect programmatically that</p>
  
  <ol>
  <li>the image has finished loading and</li>
  <li>the view has been fully updated with the rendered image</li>
  </ol>
  
  <p>without using weird timeouts?</p>