# MathJax Binding in Angular.js

## Introduction to Mathjax

MathJax is an open source JavaScript framework that makes formatting mathematical formulas easy. We use MathJax for rendering the many statistical formulas in the description of the DataCamp exercises. Mathjax converts a string like:

```
[ left( sum_{k=1}^n a_k b_k right)^2
leq left( sum_{k=1}^n a_k^2 right)
left( sum_{k=1}^n b_k^2 right) ][/code]
```

## MathJax binding in Angular.js

At DataCamp, we use Angular.js as our JavaScript MVC framework to create the feeling of a "single-page application". However, one of the downsides of using such an MVC framework is that it's not always easy to couple it with other JavaScript frameworks like for instance MathJax.

Angular provides databinding between the model and the view (more info here). The goal is to create something called a directive, that automatically renders the MathJax syntax when the model changes and the view is updated. So we are actually focussing on MathJax binding in Angular.js.

### Step 1 : Include the MathJax source script

### Step 2 : Create the Directive

This code will create a mathjax directive that watches for any change on the ng-model attribute. This means that if a controller changes the `$scope.mjx`

property, MathJax will automatically rerender the changed element. In other words, we've done MathJax binding in Angular.js

If you have any questions or suggestions, feel free to let me know at [email protected]

← Back to blog