NgMaterial / Material Design Ripple effect is bleeding through the margin

Question

I applied material design to a series of div's that represent links in the sidenav panel.

My problem is that the ripple click effect is being applied too broadly, hitting not just the content of the div, but also its parent, md-item-content, element.

md-ink-ripple attribute is being applied once, as an attribute in the HTML, as seen below.

I have played around with the location of the ripple attribute, both upwards to its grandparent, md-item, and downwards to the child <label> element, and it seems like no matter where I place it, it continues to ripple through the same md-item-content element.

EDIT- I think I have this problem solved via switching out the target tags to be md-item-content, instead of div. Leaving this up for posterity, and for any interested parties to give 2 cents.

<md-content>
<md-list>
  <md-item ng-repeat="item in data.exhibits" id="toc-item-{{::$index}}">
    <md-item-content>
      <div class="toc-indices">
        <span>{{::$index + 1}}</span>
      </div>
      <div class="md-tile-content exhibit-link" md-ink-ripple ng-click="goToSection($index, -1)" ng-class="{'md-item-active': (data.currentExhibitIndex === $index)}">
        <label>{{::item.title}}</label>
      </div>
    </md-item-content>
    <md-item-content ng-repeat="section in item.sections">
      <label class="md-tile-content exhibit-section-link" ng-click="goToSection($parent.$index, $index)" id="toc-item-{{::$parent.$index}}-section-{{::$index}}" ng-class="{'md-item-active': (data.currentExhibitIndex === $parent.$index && data.sectionIndex === $index)}">
            {{::section.title}}
      </label>
    </md-item-content>
    <section class="clo-parts-divider"></section>
  </md-item>
</md-list>

Answer 1

If you make the div position relative like this,

<div md-ink-ripple="#f5f5f5" style="position:relative"></div>

The ripple will stay within the div container.

-Source