AngularJS template variable not working/displaying

Question

I have a directive that displays a font box in an angularJS project. The block of code works fine in other browsers, but in IE (10, & 11), the template variable is not processed and "{{ currentFont }}" actually displays in the browser instead of the variable it represents.

I also added the currentFont variable to the div's class to see if that would process in IE11, and it worked fine. It's just the variable that is inside of the tag that is the problem.

I assume this is a common problem and easy to fix. Does anyone have any ideas?

<div id="fnt-select" class="select-box {{ currentFont }}" ng-class="{disabled: !selectedTextField}" ng-click="!selectedTextField || toggleSelect($event)">
  {{currentFont}}
</div>

Answer 1

The answer was to use ng-bind

<div id="fnt-select" ng-bind="currentFont" class="select-box {{ currentFont }}" ng-class="{disabled: !selectedTextField}" ng-click="!selectedTextField ||     toggleSelect($event)"></div>