Getting MathJax to update after changes to AngularJS model -

i trying use angularjs two-way binding text includes latex style equations. call mathjax format equations, i'm not sure of best way ensure mathjax called after angularjs finishes changing model. think need callback. here javascript:

var myapp = angular.module('myapp',[]); function myctrl($scope) {    $scope.update = function() {        $scope.expression = 'evaluate: \\( \\frac{9}{4} \\div \\frac{1}{6} \\)';        mathjax.hub.queue(["typeset", mathjax.hub]);    }    $scope.expression = 'evaluate: \\( \\frac{5}{4} \\div \\frac{1}{6} \\)'; 

}

and here html:

<div ng-controller="myctrl">     <button ng-click="update()">update</button>   {{expression}} </div> 

fiddle here: http://jsfiddle.net/lukashalim/uvjtd/1/. you'll notice on fiddle original expression isn't removed after click update button twice - seems bug or conflict.

having wasted many days (and maybe weeks) fighting mathjax, i'm familiar various quirks updating math expressions on fly. i'm brand new angular gave me chance dive in , ended solution solves problems -- it'll solve yours well.

live demo: http://jsfiddle.net/spicyj/ypqvp/

---

instead of using plain interpolation angular provides, created new directive based on ng-bind called mathjax-bind.

if expression variable containing math code, instead of \( {{expression}} \) can write:

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

and typeset , updated @ appropriate times.

the supporting code 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]]);             });         }]     }; });