Character "›" (›) breaking angular in IE11

Question

I am having an issue using a character in IE11. It's being used in a jade template in an angular directive, and it's only an issue in IE11.

I have two span tags, the first one contains the character "›" and the following one contains a {{ var }}. The variable is being printed literally as "{{ var }}" in the browser instead of "val", but when I change the first span contents to anything else, the {{ var }} is rendered fine as "val".

I have tried using the HTML entity (›) and it still breaks it. I have tried several other HTML entities and they work just fine.

It seems like it's an issue with this specific character. Does anyone know why this is?

Here is the code:

span.rsaquo  ›
span.subcategory  {{ category.subname }}

Here's the output:

Answer 1

I have seen this issue using the double angle bracket character directly in my code. I have also found is when using the ndash character. The solution I found was to use ng-bind-template attribute anywhere you want to use these funny characters.

<span ng-bind-template="rsaquo >">
    <span>{{category.subname}}</span>
</span>

or

<span ng-bind-template="rsaquo >">
    <span ng-bind="category.subname"></span>
</span>

The underlying issue is that IE stops processing javascript on DOM elements with these characters (although I'm not sure why). It is sand-boxed to only the element that contains that character, as well as any children.

It only happens if the character appears directly in the HTML while the page is loading. That is why if you put it in the ng-bind-template directive, IE doesn't see it until after everything has loaded and it has processed everything.