在ng-repeat中实现css模态循环不起作用

Question

以下是根据本指南http://materializecss.com/modals.html提供的示例代码。个别模态工作正常，但循环不起作用。我尝试使用ng-repeat $ index来获取唯一的模态＆＃39; ID

<tr ng-repeat="u in users">
    <td>{{ $index +1 }}</td>
    <td>{{ u.first_name +" "+ u.last_name }}</td>
    <td>{{ u.email }}</td>
    <td>{{ u.plan }}</td>
    <td>
        <a class="waves-effect waves-light btn modal-trigger" data-target="modal1" href="#modal{{$index+1}}">
        Remove
        </a>
        <div id="modal{{$index+1}}" class="modal bottom-sheet">
            <div class="modal-content">
                <h4>Modal Header</h4>
                <p>A bunch of text</p>
                </div>
                <div class="modal-footer">
                <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
            </div>
        </div>
    </td>
</tr>