En mi directiva, necesito seleccionar ciertos elementos DOM, algunos de los cuales se generan dinámicamente en un ciclo ng-repeat. Si lo hago de manera directa, solo obtendré los elementos estáticos. Sin embargo, si demoro la selección en, digamos, 500 ms, obtendré todos los elementos, que es lo que quiero.

Aunque esto funciona, no es una solución ideal, y ciertamente no parece la mejor práctica. Por un lado, le gustaría mantener el tiempo de espera lo más corto posible, pero por otro lado, desea asegurarse de que el DOM esté listo antes de seleccionar.

¿Hay un evento que se dispara cuando todo el DOM dinámico está listo? ¿Cuál es la forma recomendada de seleccionar elementos generados dinámicamente desde una directiva AngularJS?

EJEMPLO:

HTML:

<div data-my-directive>
    <div class="modal-body">                        
        <label data-localize>type:</label>&nbsp;
        <select class="form-control" ng-model="assetFilter.appCode" ng-change="loadassets(assetFilter.appCode)" ng-options="type.code as type.name for type in types"></select>

            <table class="table table-default" ng-show="hasLoaded">
                <tbody ng-repeat="asset in assets | filter:assetFilter | orderBy:'assetKey':false">
                <tr>
                    <td>
                        <div class="container-fluid">
                            <div class="row vert-align">
                                <div class="col-sm-4">
                                    {{asset.assetKey}}
                                </div>
                                <div class="col-sm-8" style="height:100%">
                                    <input ng-hide="asset.assetKey.length >= 80" type="text" class="form-control" ng-model="asset.assetValue" ng-change="asset.isModified=true">
                                    <textarea ng-show="asset.assetKey.length > 80" class="form-control" ng-model="asset.assetValue" ng-change="asset.isModified=true"></textarea>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>

    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="save(saveassets, $event)" ng-disabled="!(assets | anyModified)" data-localize>Save</button>
        <button class="btn btn-warning" ng-click="close($event)" data-localize>Close</button>
    </div>
</div>

Directiva:

myApp.directive('myDirective', function ($timeout) {
    return {
        restrict: 'A', //attribute only
        link: function (scope, elem, attr, ctrl) {    
            var context = elem[0]; 
            var availableFormElements = 'input:not([disabled]):not([class*=ng-hide]),' +
                'select:not([disabled]):not([class*=ng-hide]), textarea:not([disabled]):not([class*=ng-hide]),' +
                'button:not([disabled]):not([class*=ng-hide]),' +
                '*[class*=btn]:not([disabled]):not([class*=ng-hide])';

            var allFormElements = context.querySelectorAll(availableFormElements);
            // Will only get static elements, nothing from ng-repeat loop

            $timeout(function () {
                allFormElements = context.querySelectorAll(availableFormElements);
                // Will include all elements, also from ng-repeat loop
            }, 500);     

            // Code to manipulate selected form elements   

    };
});