Como faço para escapar das chaves para exibição na página ao usar o AngularJS?

Quero que o usuário veja as chaves duplas, mas o Angular as vincula automaticamente. Este é o caso oposto desta questão em que eles não querem ver as chaves usadas para vinculação quando a página está carregando.

Quero que o usuário veja isto:

My name is {{person.name}}.

Mas Angular substitui {{person.name}}pelo valor. Achei que isso pudesse funcionar, mas angular ainda o substitui pelo valor:

{{person.name}}

Plunker: http://plnkr.co/edit/XBJjr6uR1rMAg3Ng7DiJ

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

Documentação @ ngNonBindable

Editar: adicionar \ barra entre colchetes dentro das aspas funciona

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

isso também .. passa por interpretações angulares

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

isto também ..

{{ person.name }<x>} 

{{ person.name }<!>}

Em nosso caso, queríamos apresentar chaves em um espaço reservado, portanto, elas precisavam aparecer dentro de um atributo HTML . Usamos isto:

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

Como você pode ver, estamos construindo uma string a partir de três strings menores, para manter as chaves separadas.

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

Isso evita o uso, ng-non-bindablepara que possamos continuar a usar ng-atributos em outras partes do elemento.

Use ng-non-bindableno contêiner, isso é eficaz em todos os elementos dentro do contêiner.

<div ng-non-bindable>
  <span>{{person.name}}</span>
  <img src="#" alt="{{person.name}}">
  <input placeholder="{{person.name}}">
</div>

<span>{{</span>{{variable.name}}<span>}}</span>

Atualizado para Angular 9

Use ngNonBindablepara escapar da ligação de interpolação.

<div ngNonBindable>
  My name is {{person.name}}
</div>

Eu queria colchetes simples no texto e as soluções acima não funcionaram para mim. Então queria o Angular recomendado.

Versão Angular: 5

Texto obrigatório: Meu nome é {person.name}.

<span>My name is {{'{'}}person.name{{'}'}}.</span>

Eu espero que isso ajude alguém.