angularjs - AngularJS ディレクティブ、JavaScript でテンプレートを操作する

Question

AngularJS ディレクティブを使用してJQueryUI プログレスバーを実装しようとしていますが、少し面倒です。おそらく、ディレクティブで使用できる設定オプションの過多についての理解に失敗しているように感じます。基本的には、次のようなことができるようになりたいです。

<div ng-repeat="te in timedEvents">
    <progressbar identifier="{{te.identifier}}" begins="{{te.beginTimestamp}}" ends="te.endTimestamp" now="td.nowTimestamp"></progressbar>
</div>

イベントはサーバーから非同期に送信されます (言及することが重要かどうかはわかりません)。そして、次のようなディレクティブがあります。

myApp.directive('progressbar', function($compile) {
    return {
        restrict: 'E',
        scope: {
            identifier: '@identifier'
        },
        template: "<div id='{{identifier}}'></div>",
        link: function (scope, element, attrs) {
            var percentComplete = --whatever--; //calculate this, obviously
            $("#" + attrs.identifier).progressbar({
                value: percentComplete;
            });
            //do other stuff to set a proper interval for keeping this updated
        }
    }
})

テンプレートによって作成された DOM 要素の準備が整う前にリンク関数のコードが実行されるという問題があるため、JQuery などを介して上記の DIV にアクセスしようとすると、未定義に戻ります。これを回避するハックな方法は、タイムアウトを設定して、要素が見つかるまで試行し続けることです (通常、1 秒未満の時間がかかります)。ただし、ディレクティブ自体を介してこれを行う方法があり、テンプレートがページに適切に配置された後にのみその JavaScript コードを実行しようとする方法があるかどうか疑問に思っています。

誰もこの質問に答えることができますか?