title: AngularJS - multiple ng-click - event bubbling
body: <p>In the following example:</p>
  
  <pre><code>  &lt;li ng-repeat="item in items" ng-click="showItem(item)"&gt;
      &lt;h3&gt;{{item.title}}&lt;/h3&gt;
      &lt;button ng-click="remove(item)"&gt;Remove&lt;/button&gt;
    &lt;/li&gt;
  </code></pre>
  
  <p>When I click on the button <code>showItem()</code> also is invoked due to event bubbling.
  I know that I can use <code>$event</code> to watch for <code>$event.currentTarget</code> and do <code>$event.stopPropagation()</code> etc. but this is very ugly.</p>
  
  <p>Btw. I don't want to stop propagation on the <code>button</code> (In my case the <code>button</code> is a <code>twitter bootstrap</code> <code>dopdown/button</code> - this is just an example)</p>
  
  <p><strong>How do I stop <code>showItem()</code> from beeing called when I click on the <code>remove</code> button?</strong></p>
  
  <p><strong>EDIT</strong>
  The ugly fix would be to have:</p>
  
  <pre><code>function remove(item,$event){
    $event.originalEvent.prevent = true;
    // rest of the code
  }
  
  function showItem(item,$event){
    if($event.originalEvent.prevent)return;
    // rest of the code
  }
  </code></pre>