title: How do I dynamically create clickable keywords that display a modal (uibModal) dialog in AngularJS
body: <p>I am new to AngularJS.  I have been developing a site that displays a list.  Each element in the list is a delivered from the server as a string.  Within each element I use bars as delimeters for keywords that I'd like the user to be able to click on (i.e. this is a |keyword| in this element).</p>
  
  <p>I use a controller/filter to create html to remove the delimiters and make the keywords red (using a class).  So the html looks ends up looking like this: </p>
  
  <pre><code>&lt;span ng-controller="formatForGlossaryAndCodeTextCtrl" class="ng-scope"&gt;
      &lt;span ng-bind-html="formattedLineItem" class="ng-binding"&gt;
          this is a
          &lt;span class="glossaryLookup" &gt;keyword&lt;/span&gt; &lt;!--here is my keyword--&gt; 
          in this element 
      &lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>I tried having the filter also generate <code>ng-controller=xxx</code> and <code>ng-click=xxx</code> in order to stay in the angular world but that doesn't work (my keyword is not clickable when I do that).</p>
  
  <p>I DO have jQuery code that binds the click event to the elements with <code>class=glossaryLookup</code>.  It currently displays an alert when I click on the keyword.  </p>
  
  <p>I am at a loss as to how to get that click to display an angular modal dialog.  I want it to use an angular modal dialog because there is another part of the same application that already displays an angular modal dialog and I want to be consistent</p>
  
  <p>So, in short... the server delivers a string containing one or more delimited words to the browser.  I'd like the angular/js/jquery code on the browser to not only highlight the delimited word(s) but allow me to click on them, look up a definition (I am not concerned about how to look up the definition, at least not yet) and display that definition in a  <code>$uibModal</code>.</p>
  
  <p>Thanks for any help.</p>