How to dynamically render a mathjax asciimath expression using AngularJS in a div?

I'm trying to render an AsciiMath expression that gets loaded as a string from a MySQL database. This is the div in question:

<div class="description-text" mathmode>
    {{globals.gameData[globals.navigation.selectedSubject].Chapters[globals.navigation.selectedChapter].Sections[globals.navigation.selectedSection].Problems[globals.navigation.selectedProblem].Description}}
</div>

The above loaded string is something like: Solve for `x: 4*(4x) + 2*x = 72`

And this is the directive I use to fix the normal mathjax display issues:

(function () {
'use strict';

angular
    .module('app')

    // Fixes the MathJax display issue with AngularJS        
    .directive("mathmode", function () {
        return {
            restrict: "A",
            controller: ["$element", function ($element) {
                    MathJax.Hub.Queue(["Typeset", MathJax.Hub, $element[0]]);
                }]
        };
    })
})();

When I use this directive for static expressions in HTML, everything works fine. When I try to use it for dynamic data like in the above div though, the expression doesn't get rendered correctly until I refresh the page. What can I do to fix this?

Turns out the solution was pretty simple, no need for the directive at all. I just added the following line

setTimeout(function () {
    MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
});

in the controller and everything works correctly. The controller just needed for the DOM to settle down first.