How to avoid parse error on angularjs while using mathjax to view html from server

I'm trying to use mathjax in angularjs. I have a lot of html content in the server and it requires edits also. This is the directive I'm using to trigger mathJax to render.

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'm using another directive to compile the html on 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 works in normal conditions, but for expressions like

<span class="math-tex">\({{2v}}/2\)</span>, it is triggering an error because of the curly braces 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 the content I'm using mathjax and ckeditor. It works fine too.

So far, I tried 'ng-html-bind', I could not use it because it does not support two way binding. Another option is to change interpolation start and end symbols. I've used a few libraries in the project and I do not want to mess things up just to fix this problem.

I have control over the source of html and I have an option to change (probably, find and replace) the format or texts, if it is necessary. Any suggestions would be appreciated.

Thanks