title: How to add angularjs ui bootstrap tooltips dynamically to existing markup?
body: <p>Relatively new to angularjs.  Help me understand what's going on here!</p>
  
  <p>What I'm ultimately trying to accomplish: Given a block of text in my html (say in a paragraph element), I want to dynamically add tooltips (bootstrap tooltips to be exact) to selected words in the text. So for example if a user types the world "hello" into a search box, all instances of "hello" in the paragraph will display a tooltip when hovered over, displaying some message like a definition or something.</p>
  
  <p>NOTE: I don't think I was clear on this initially, but the block of text to which I want to add the tooltip is already in the html, and will not have any kind of directive-tag mark-up surrounding it. See my <a href="http://jsfiddle.net/petersg5/pF33a/2/">fiddle</a> for an illustration. </p>
  
  <p>I've done this in jQuery...now I'm trying to get it to work in angularjs!</p>
  
  <p>My first attempt was to use a custom filter with a regex which will insert an "a" tag with the tooltip attributes into the paragraph at the appropriate locations. The new markup shows up, but doesn't seem to be "seen" by angularjs (not quite sure of the terminology yet but I think it's not getting "bound"??).</p>
  
  <p>Here's the problem on illustrated on jsfiddle:</p>
  
  <p><a href="http://jsfiddle.net/petersg5/pF33a/2/">http://jsfiddle.net/petersg5/pF33a/2/</a></p>
  
  <p>(1) The first line in the output has a working tooltip on "foo"...it just has the tooltip attributes directly in markup. Generated html:</p>
  
  <pre><code>&lt;a href="#" tooltip-placement="top" tooltip="basic tooltip" class="ng-scope"&gt;foo&lt;/a&gt;
  </code></pre>
  
  <p>(2) The second line uses ng-bind-html, and has the attributes, but not a working tooltip. Generated html:</p>
  
  <pre><code>&lt;a href="#" tooltip-placement="top" tooltip="tooltip via ng-bind-html"&gt;foo&lt;/a&gt;
  </code></pre>
  
  <p>(3) The third line uses the filter, and has the attributes, but not a working tooltip. Generated html:</p>
  
  <pre><code>&lt;a href="#" tooltip-placement="top" tooltip="tooltip via filter"&gt;foo&lt;/a&gt;
  </code></pre>
  
  <p>My main question is...how to solve the task I described above?</p>
  
  <p>Secondary question is about understanding what's going on in each of the 3 examples above. I noticed that the direct output in (1) has an "ng-scope" class inserted by angular in the generated markup. The other two lack this, but do have an ng-binding class inserted in the parent p tag. Not sure what's going on here but I think it has something to do with my problem.</p>
  
  <p>I have a feeling the solution may involve a directive, but I'm not sure how I would apply that directive to existing text (i.e., a p tag already in the markup).</p>
  
  <p>Thanks!</p>
  
  <p>EDIT: updated the jsfiddle to more accurately reflect the problem (fourth line in output)</p>