MathJax Angular Typeset

HTML

<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&amp;delayStartupUntil=configured&amp;dummy=.js"></script>
<div ng-controller="MyCtrl">
    <input type="text" ng-model="expression"><br>
    <span mathjax-bind="expression"></span>
</div>

JavaScript

MathJax.Hub.Config({skipStartupTypeset: true});
MathJax.Hub.Configured();

var myApp = angular.module("myApp", []);

myApp.directive("mathjaxBind", function() {
    return {
        restrict: "A",
        controller: ["$scope", "$element", "$attrs", function($scope, $element, $attrs) {
            $scope.$watch($attrs.mathjaxBind, function(value) {
                $element.text(value == undefined ? "" : value);
                MathJax.Hub.Queue(["Typeset", MathJax.Hub, $element[0]]);
            });
        }]
    };
});

function MyCtrl($scope, $element) {
    $scope.expression = "this is my expression \\( \\frac{5}{4} \\div \\frac{1}{6} \\)";
}