AngularJs Directive doesn't work until page reload

Question

I'm trying to build an angularJs directive which will make a div sticky. But I'm stuck in the initial state.

The problem is, this scroll event fires only on page reload. Doesn't work on route change initially. But once I reload the page it work's even with route change.

What am I doing wrong here?

Codes are following:

(function (angular, window) {
    "use strict";

    function stickyDivDirective($compile, $timeout) {
        function directiveLink(scope, element, attributes) {

            function scrollFunction(targetDocument) {
                console.log('Scrolling');
            }

            angular.element(document.querySelector('md-content')).on('scroll', scrollFunction);
        }
        
        var directive = {
            restrict: "A",
            scope: {
                mainContainer: "@",
                targetContainer: "@",
                offsetHeight: '@',
                scrollableElement: '@'
            },
            link: directiveLink
        };
        return directive;
    }

    stickyDivDirective.$inject = ["$compile", "$timeout"];
    angular
        .module(appSuite.module + ".directives")
        .directive("stickyDiv", stickyDivDirective);
})(window.angular, window);

<div class=""
     id="saa__variablesBar"
     sticky-div>
<div>

;

Answer 1

I found the solution. This is really weird. I just used getElementById instead of querySelector. The issue resolved.