How to stop MathJax in rendering from other page in angularJS

I have a situation that I noticed that everytime I load a page that contain mathjax and when I go to other page with another mathjax, I will wait for almost 2 minutes to load. My opinion is that mathjax load first all the formula from the other page before rendering the formula in the current page...

I don't really know what I caused because it is only my opinion but that was I noticed.

Im using angularJS and here is my code in directives:

app.directive("mathjaxBind", function () {
    return {
        restrict: "A",
        controller: ["$scope", "$element", "$attrs",
            function ($scope, $element, $attrs) {
                $scope.$watch($attrs.mathjaxBind, function (texExpression) {
                    $element.html(texExpression);
                    MathJax.Hub.Queue(["Typeset", MathJax.Hub, $element[0]]);
                });
            }]
    };
});

What might be the cause of this problem? If I'm correct with my opinion, how to stop mathjax in rendering if it I'm now in the next page?

Solution

Just try to update your mathjax every load of your formula. What I did is that i initials update every repeat.

I do it like this..

<a mathjax-bind="competency.competencyDescription" data-ng-init="UpdateMathJax()">

$scope.UpdateMathJax = function () {
        MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
    };

I hope it will help you.