How to display a material light menu that is generated dynamically?

Question

Angular

Menus taken from here:
https://getmdl.io/components/index.html#menus-section
Here is the code that generates the menu:

<div class="demo-card-event mdl-card mdl-shadow--2dp" ng-repeat="exemplers in modelExemplersLists">
         
                <button id="demo-menu-top-right-{{ exemplers.id }}"
                        class="mdl-button mdl-js-button mdl-button--icon">
                  <i class="material-icons">more_vert</i>
                </button>
            
                <ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
                    data-mdl-for="demo-menu-top-right-{{ exemplers.id }}">
                  <li class="mdl-menu__item">Редактировать</li>
                  <li class="mdl-menu__item">Удалить</li>
                </ul>

              </div>
            </div>

modelExemplersLists - empty at first, it appears when the server returns JSON
, but in the end, angular renders everything, and the menu is already inactive

. Unfortunately, for some reason, the dom tree is drawn several times because of this

dataService.getModelExemplarsList(model.id, function(data){

      $scope.modelExemplersLists = data.exemplars;

      angular.element(document).ready( 
        function() {
          componentHandler.upgradeAllRegistered();
      });

});

Answer 1

Пока работает это

angular.element(document).ready( 
      function() {
        componentHandler.upgradeAllRegistered();
    });