Estoy intentando implementar un componente de panel de desplazamiento personalizado mediante una directiva AngularJS. en el siguienteejemplo de jsfiddle Tengo un ejemplo del prototipo básico.

Aquí hay un esquema de mi idea:

Aquí está el código de la directiva:

    myApp.directive('lpScrollPane', function factory() {
    return {
        restrict: 'A',
        replace: true,
        transclude: true,
        template: '<div class="scrollPaneWrapper"><div class="scrollPane" ng-transclude></div><div class="thumbTrack" ></div></div>',
        compile: function (tElement, tAttrs) {
            var minHeight = 30;
            return function (scope, iElement, iAttrs) {
                var thumbTrack = angular.element(iElement.children()[1]);

                scope.onScrollHeight = function () {
                    console.log(iElement.children()[0].scrollHeight);

                    var H1 = iElement[0].offsetHeight;
                    var H2 = iElement.children()[0].scrollHeight;
                    if (H2 > H1) {
                        var trackHeight = Math.round(minHeight + (H1 - minHeight) * (1 - Math.pow((H2 - H1) / H2, 0.8)));
                        thumbTrack.css({
                            display: "block",
                            height: trackHeight + "px"
                        });
                        console.log(H2, H1, trackHeight);
                    } else {
                        thumbTrack.css({
                            display: "none"
                        });
                    }
                };

                scope.$watch(function () {
                    scope.onScrollHeight();
                    //setTimeout(scope.onScrollHeight, 100)
                });


            }
        }
    };
});

Básicamente hay 2 inmersiones 1 con desbordamiento oculto y una con desplazamiento de desbordamiento y otra div para imitar el rastreador de pulgar.

Mi objetivo es monitorear la propiedad scrollHeight y luego cambiar la altura del rastreador en consecuencia. el problema es que $ watch se activa antes de que se genere el DOM, por lo que hay una demora en mostrar y calcular el rastreador. Por ahora, utilicé setTimeout en la función de reloj y funciona bien (anule el comentario de la línea 35 y el comentario 34 para verlo en acción).

¿Cuál sería la forma correcta de hacerlo?