How do I escape curly braces for display on page when using AngularJS?

Edit: adding \ slash between brackets inside the quotes works

{{  "{{ person.name }\}"   }}

this too .. by passes angular interpreting

{{ person.name }<!---->}

this too ..

{{ person.name }<x>} 

{{ person.name }<!>}

<code ng-non-bindable>{{person.name}}</code>

Documentation @ ngNonBindable

In our case we wanted to present curly brackets in a placeholder, so they needed to appear inside an HTML attribute. We used this:

 <input placeholder="{{ 'Hello {' + '{person.name}' + '}!' }}" ...>

As you can see, we are building up a string from three smaller strings, in order to keep the curly braces separated.

'Hello {' + '{person.name}' + '}!'

This avoids using ng-non-bindable so we can continue to use ng- attributes elsewhere on the element.

Related