Getting MathJax to update after changes to AngularJS model

Having wasted many days (and maybe weeks) fighting MathJax, I’m all too familiar with its various quirks with updating math expressions on the fly. I’m brand new to Angular but this gave me a good chance to dive in and I ended up with a solution which solves my problems — hopefully it’ll solve yours as well.

Live demo: jsfiddle

---

Instead of using the plain interpolation that Angular provides, I created a new directive based on ng-bind called mathjax-bind.

If expression is a variable containing math code, then instead of \( {{expression}} \) you can write:

<span mathjax-bind="expression"></span>

and everything will be typeset and updated at the appropriate times.

The supporting code for the directive follows:

myApp.directive("mathjaxBind", function() {
    return {
        restrict: "A",
        controller: ["$scope", "$element", "$attrs",
                function($scope, $element, $attrs) {
            $scope.$watch($attrs.mathjaxBind, function(texExpression) {
                var texScript = angular.element("<script type="math/tex">")
                    .html(texExpression ? texExpression :  "");
                $element.html("");
                $element.append(texScript);
                MathJax.Hub.Queue(["Reprocess", MathJax.Hub, $element[0]]);
            });
        }]
    };
});