Angular bootstrap-material-design removes ripple effect in ng-repeat

Question

I'm using bootstrap-material-design in my Angular app. The ripple effect works well throughout the app, though when using ng-repeat I'm losing the ripple effect.

I created an item outside the ng-repeat in the same <ul> and works fine.

Is it caused because of ng-repeat creates a new scope? If so how should I approach it correctly...?

Is there something I'm missing in my code?

<ul class="list-unstyled">
  <li class="btn" ng-repeat="data in eventsData">
    {{data.title}}
  </li>
</ul>

Answer 1

Looking at the documentation (very interesting project btw) I can see that you're not using the classes or tags that trigger a ripple. These are the default ones:

"withRipples": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple"

Try adding the .withripple class, or using a button / a tag inside your li tags