jquery - レンダリングが終了したときに jquery ui ウィジェットを起動する Angular ディレクティブ

Question

テンプレートのレンダリングが終了したときに jquery ui ウィジェットを起動する角度ディレクティブを作成しようとしています。テンプレートは別の html ファイルにあり、このテンプレートのデータはルートスコープの別のコンポーネントに非同期的に配置されます。

問題は、jquery ui ウィジェット (この場合は jquery ui タブ) への呼び出しがあまりにも早く発生し、テンプレートのレンダリングがまだ完了していないことです。タブが正しくレンダリングされません。タブ ウィジェットの呼び出しを $timeout 内に 0.5 秒の遅延で配置すると、正常に動作しますが、それは私にとって確実な解決策のようには見えません。

コードは次のとおりです。

house.directive('floorDirective', function($rootScope, $timeout) {
    return {
        templateUrl: 'app/partials/floor.html',
        link: function(scope, element, attrs)
        {
            scope.$watch('navigationDto', function(navigationDto) {
                scope.toolNodes = [];
                if (navigationDto != undefined) {
                    var treeNodes = navigationDto.TreeNodes;
                    for (var x = 0; x < treeNodes.length; x++) {
                        if (treeNodes[x].Id == -100) { //File
                            scope.menuNodes = treeNodes[x].Children;
                        }
                        else {
                            scope.toolNodes.push(treeNodes[x]);
                        }
                    }
                }
                element.children(':first').tabs({
                    active: 1
                });
            });
        }
    };
});

そして、これが（簡略化された）テンプレートです：

<div id="floor">
    <ul class="floor-tabs">
        <li data-ng-repeat="treeNode in navigationDto.TreeNodes" id="{{treeNode.Id}}">
            <a href="#tab{{treeNode.Id}}">{{treeNode.Name}}</a>
        </li>
    </ul>

    <div class="floor-menu">
        <div data-ng-repeat="itemNode in menuNodes" id="tab{{itemNode.Id}}">
            <a href="#">itemNode.Name</a>
        </div>
    </div>

    <div class="floor-tool" data-ng-repeat="toolNode in toolNodes" id="tab{{toolNode.Id}}">
        <div data-ng-repeat="categoryNode in toolNode.Children">
            <h2>{{categoryNode.Name}}</h2>
            <div data-ng-repeat="itemNode in categoryNode.Children">
        <a href="#">itemNode.Name</a>
    </div>
        </div>
    </div>
</div>

テンプレートのレンダリングが完了した正確なタイミングで jquery ウィジェットを起動する方法はありますか? それとも、問題を間違った方法で見ていますか?