Material Design Liteメニューダイナミックリピート

Question

MDLのメニュー機能を実現しようとしています。下のコードに示すように、静的にうまく機能しています。

<button id="demo-menu-lower-left" 
    class="mdl-button mdl-js-button mdl-button--icon"> 
    <i class="material-icons">more_vert</i> 
</button> 

<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" 
for="demo-menu-lower-left"> 
    <li class="mdl-menu__item">Some Action</li> 
    <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li> 
    <li disabled class="mdl-menu__item">Disabled Action</li> 
    <li class="mdl-menu__item">Yet Another Action</li> 
</ul> 

私はAngularのng-repeatを使って、ng-repeatのIDでボタンのIDを繰り返すので、このコードを実装しています。繰り返しの後、メニューはドロップダウンできません。私はここで何が欠けていますか？以下のコードはここ

<div ng-repeat="product in vm.products"> 

<button id="{{product._id}}" 
    class="mdl-button mdl-js-button mdl-button--icon"> 
    <i class="material-icons">more_vert</i> 
</button> 

<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" 
for="{{product._id}}"> 
    <li class="mdl-menu__item">Some Action</li> 
    <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li> 
    <li disabled class="mdl-menu__item">Disabled Action</li> 
    <li class="mdl-menu__item">Yet Another Action</li> 
</ul> 

</div> 

Answer 1

を働く作業バージョンではありませんngのリピートである：http://jsfiddle.net/xjdjjjrz

<div ng-repeat="product in vm.products"> 
    <button id="{{product._id}}-{{$index}}" 
     class="mdl-button mdl-js-button mdl-button--icon"> 
     <i class="material-icons">more_vert</i> 
    </button> 
    <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" 
    for="{{product._id}}-{{$index}}"> 
    <li class="mdl-menu__item">Some Action</li> 
    <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li> 
    <li disabled class="mdl-menu__item">Disabled Action</li> 
    <li class="mdl-menu__item">Yet Another Action</li> 
    </ul> 
</div>