Como adicionar dicas de ferramentas de bootstrap da interface do usuário angularjs dinamicamente à marcação existente?
Relativamente novo para angularjs. Ajude-me a entender o que está acontecendo aqui!
O que estou tentando realizar: dado um bloco de texto em meu html (digamos em um elemento de parágrafo), quero adicionar dinamicamente dicas de ferramentas (dicas de ferramentas de autoinicialização para ser exato) às palavras selecionadas no texto. Por exemplo, se um usuário digitar "olá" no mundo em uma caixa de pesquisa, todas as instâncias de "olá" no parágrafo exibirão uma dica de ferramenta ao passar o mouse, exibindo alguma mensagem como uma definição ou algo assim.
OBSERVAÇÃO: acho que não fui claro sobre isso inicialmente, mas o bloco de texto ao qual desejo adicionar a dica de ferramenta já está no html e não terá nenhum tipo de marcação de diretiva ao redor. Veja meuviolino para uma ilustração.
Eu fiz isso no jQuery ... agora estou tentando fazê-lo funcionar em angularjs!
Minha primeira tentativa foi usar um filtro personalizado com uma expressão regular que inserisse uma tag "a" com os atributos da dica de ferramenta no parágrafo nos locais apropriados. A nova marcação aparece, mas não parece ser "vista" por angularjs (ainda não tenho certeza da terminologia, mas acho que não está ficando "vinculada" ??).
Aqui está o problema ilustrado no jsfiddle:
http://jsfiddle.net/petersg5/pF33a/2/
(1) A primeira linha na saída possui uma dica de ferramenta em "foo" ... apenas os atributos da dica de ferramenta diretamente na marcação. Html gerado:
<a href="#" tooltip-placement="top" tooltip="basic tooltip" class="ng-scope">foo</a>
(2) A segunda linha usa ng-bind-html e possui os atributos, mas não uma dica de ferramenta de trabalho. Html gerado:
<a href="#" tooltip-placement="top" tooltip="tooltip via ng-bind-html">foo</a>
(3) A terceira linha usa o filtro e possui os atributos, mas não uma dica de ferramenta de trabalho. Html gerado:
<a href="#" tooltip-placement="top" tooltip="tooltip via filter">foo</a>
Minha principal pergunta é ... como resolver a tarefa que descrevi acima?
A pergunta secundária é sobre como entender o que está acontecendo em cada um dos três exemplos acima. Notei que a saída direta em (1) tem uma classe "ng-scope" inserida por angular na marcação gerada. Os outros dois não têm isso, mas têm uma classe de ligação de ng inserida na tag p pai. Não tenho certeza do que está acontecendo aqui, mas acho que tem algo a ver com o meu problema.
Sinto que a solução pode envolver uma diretiva, mas não tenho certeza de como aplicaria essa diretiva ao texto existente (ou seja, uma tag p já na marcação).
Obrigado!
EDIT: atualizado o jsfiddle para refletir com mais precisão o problema (quarta linha na saída)