title: Angular directive breaks scope?
body: <p>First off, I'm new to Angular, and realize that I may be missing a core concept...</p>
  
  <p>Consider the jsfiddle: <a href="http://jsfiddle.net/D4dFv/" rel="nofollow">http://jsfiddle.net/D4dFv/</a></p>
  
  <p>I'd like to be able to click on each link, and see the <code>{{driveState.currentView}}</code> update in the DOM.</p>
  
  <p>Everything works fine until I add in a directive that helps me detect when all images on the page have loaded successfully. With that directive in place, the binding appears to break, and you can no longer click on each link and see <code>driveState.currentView</code> update.</p>
  
  <p>Why is this?</p>
  
  <p>To test this in the jsfiddle, note that the following works fine:
  <code>&lt;img width='10' height='10' src='http://www.w3schools.com/images/pulpit.jpg'&gt;</code></p>
  
  <p>...and this breaks the data binding somehow:
  <code>&lt;img imageonload width='10' height='10' src='http://www.w3schools.com/images/pulpit.jpg'&gt;</code></p>
  
  <p>Thanks in advance.</p>