title: Ng-bind-html with AngularJS filter and Angular-ui highlight
body: <p>I'd like to use an AngularJS filter to search for a piece of text in a table and then use <a href="http://angular-ui.github.io/ui-utils/" rel="nofollow noreferrer">Angular-ui highlight</a> to highlight the text.</p>
  
  <p>I have the following code:</p>
  
  <p>Search field:</p>
  
  <pre><code>&lt;input type="text" ng-model="searchText"/&gt;
  </code></pre>
  
  <p>Table with <code>ng-repeat</code> and angular-ui <code>highlight</code></p>
  
  <pre><code>&lt;table ng-repeat="fruit in fruits"&gt;
      &lt;tr&gt;
          &lt;td&gt;{{ fruit.name | highlight:searchText }}&lt;/td&gt;
          &lt;td&gt;{{ fruit.price }}&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>But my result looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/gUTAg.png" alt="Resulting HTML"></p>
  
  <p>I think I should be using <code>ng-bind-html-unsafe</code>, but am not sure of the correct way to implement it. Any ideas?</p>