title: angular.js directive with isolate scope
body: <p>I know there are already a lot of questions about this topic but I can't make my example work.</p>
  
  <p>See the example at <a href="http://plnkr.co/edit/ua32dkF7fz6X2fA0ZAw3" rel="nofollow">plnkr.co#ua32dkF7fz6X2fA0ZAw3</a>.</p>
  
  <p>Each teaser has some additional informations that should appear when a user clicks on one of the teasers. However as soon as I click on one of the teasers the additional informations appear below every teaser. I'd like to show them only below the one teaser that I clicked on. </p>
  
  <p>I'm pretty sure that's happening because the directives share the same parent scope. How can I keep the <code>isActive</code> variable private to each teaser?</p>