title: Stop nested ripple effect
body: <p>I'm working with Angular Materia 0.10.1.</p>
  
  <p>I have a <code>md-button</code> nested inside a <code>md-list-item</code>. Both elements triggers the ripple effect when clicked, and when I click the button, it triggers the ripple effect on both elements at the same time. I want to have ripples on the button or on the list element <strong>only</strong>, but never both at the same time.</p>
  
  <pre><code>&lt;md-list flex&gt;
      &lt;md-list-item ng-click="a('a')"&gt;
        &lt;p&gt;Some name&lt;/p&gt;
        &lt;md-button class="md-accent md-raised" ng-click="b('b', $event)"&gt;Do something&lt;/md-button&gt;
      &lt;/md-list-item&gt;
   &lt;/md-list&gt;
  </code></pre>
  
  <p>I've used <code>$event.stopPropagation()</code> but it doesn't stop the ripples in the same way it stops nested click events.</p>
  
  <p><a href="http://plnkr.co/edit/Pe1B9DskBCHvKgpfpwel" rel="nofollow">This Plunker</a> can demonstrate it better.</p>