MDL Button Ripple is Inconsistent

Question

I'm using the Material Design Lite CSS/JS "template" Google just released to sprinkle some Material Design into my Angular app and I've noticed the button-ripple effect is pretty inconsistent.

Sometimes on my main app view it never loads up the button ripples despite working in other views, and then on other views it only works the first one or two instances. For example,

Main view has one ng-repeating list of buttons:

<li ng-repeat="item in items">
    <a class="mdl-button mdl-js-button mdl-ja-ripple-effect">{{item.name}}</a>
</li> <!-- ripple sometimes works totally fine !-->

Alternate views have a couple of static buttons followed by an ng-repeat list of buttons:

<li id="non-repeating-list-item-1">
    <a class="mdl-button mdl-js-button mdl-ja-ripple-effect">Hello</a>
</li> <!-- ripple always works totally fine !-->
<li id="non-repeating-list-item-2">
    <a class="mdl-button mdl-js-button mdl-ja-ripple-effect">Hello</a>
</li> <!-- ripple always works totally fine !-->

<li ng-repeat="item in items">
    <a class="mdl-button mdl-js-button mdl-ja-ripple-effect">{{item.name}}</a>
</li> <!-- ripple never works !-->

Is this bad practice or something? Is there any reason for this to happen?

Answer 1

As far as I know, MDL uses vanilla JavaScript to implement many of the interactions. This conflicts with Angular's directives - for example, there's no way for MDL to bind an event listener to an element that Angular is dynamically updating. This explains why your static buttons mostly work fine, but your repeated buttons usually do not.

You'd probably be better off with Angular Material, which is an official Material Design implementation in Angular. Everything should just work out of the box.