Как динамически визуализировать выражение asciimath mathjax, используя AngularJS в div?

Question

Я пытаюсь отобразить выражение AsciiMath, которое загружается как строка из базы данных MySQL. Это ДИВ в вопросе:

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

выше загружается строка что-то вроде: Решите для `х: 4 * (4x) + 2 * х = 72`

И это директива Я использую, чтобы исправить обычные проблемы с отображением MathJax:

(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]]); 
       }] 
     }; 
    }) 
})(); 

Когда я использую эту директиву для статических выражений в HTML, все работает отлично. Когда я пытаюсь использовать его для динамических данных, как, например, в вышеприведенном div, выражение не будет отображаться правильно, пока я не обновляю страницу. Что я могу сделать, чтобы исправить это?

Answer 1

Оказывается, решение было довольно простым, без необходимости в директиве. Я только что добавил следующую строку:

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

в контроллере и все работает правильно. Контроллер просто необходим для того, чтобы DOM располагался первым.