Angular js: espera a que terminen los elementos

Entonces, soy un poco nuevo en Angular js y estoy trabajando en un sitio web heredado que lo usa y tengo esta Directiva Angular que esencialmente inyecta el marcado svg para cada elemento en un menú. En esta directiva tengo un código que inserta colores para cada svg. Estos colores se obtienen de las variables css almacenadas en :root.

Quiero esperar a que finalice este proceso para todos los elementos y luego establecer un indicador en el ámbito raíz. Pero como estoy en una repetición ng, no estoy seguro de cómo puedo hacer eso. ¿Algunas ideas?

Mi marcado HTML:

  <div class="mainMenuItems">
    <div ng-repeat="item in data.menuItems track by item.sys_id"
         class="navigation-menu-item"
         aria-label="{{item.name ? item.name : item.label}}"
         ng-class="{'selected-item': (selectedMenuItem && item.sys_id === selectedMenuItem.sys_id), 'menu-link': !c.doesMenuItemHaveChildren(item)}"
         ng-click="handleMainMenuItemClick(item, $event)"
         tabindex="0"
         role="menuitem">

      <span class="menuIconImage">
        <svg-embed image="{{item.u_menu_picture_icon}}.iix?t=small"></svg-embed>
        {{item.name ? item.name : item.label}}
      </span>
    </div>
  </div>

La directiva se llama en la etiqueta <svg-embed image="{{item.u_menu_picture_icon}}" y se ve así:

function svgEmbed() {
return {
    restrict: 'E',
    replace: true,
    template:'<object class="svg-embed" data="{{::image}}" type="image/svg+xml"></object>',
    scope: {
        image : '@'
    },      
    link: function(scope, element, attrs){
        
        element.on('load', function() {
        
            doMyStuff();
            
            function doMyStuff() {
                
            }
        });
    }
};

}

Answer