How to avoid parsing error on angularjs when using mathjax to view html from server

Question

I am trying to use mathjax in angularjs. I have a lot of html content on the server and it also needs to be edited. This is the directive that I use to run mathJax for rendering.

app.directive("mathTex", ['$log',function($log) {
return {
    restrict: "C",
    link: function(scope, element, attributes) {
      var currentElement = element[0];
      //alert("mathJax directive called");
      MathJax.Hub.Queue(["Typeset", MathJax.Hub, element[0]]); 
    }
}}]);

I use another directive to compile html for any changes in scope.

app.directive('dynamicHtmlCompile', ['$compile','$parse','$log','$sanitize', function ($compile, $parse, $log, $sanitize) {
    return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamicHtmlCompile, function(html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    } 
  }
}]);

Both of these directives work under normal conditions, but for expressions like

<span class="math-tex">\({{2v}}/2\)</span>, it causes an error due to curly brackets in the expression.

Error: [$parse:syntax] Syntax Error: Token 'v' is an unexpected token at column 2 of the expression [2v] starting at [v].

For editing content, I use mathjax and ckeditor. It works great.

"ng-html-bind", , . . , , .

html, (, ) , . .