title: How to highlight search input when data rendered?
body: <p><code>searchStr</code> is user input search keyword , once i rendered response from server i want to highlight user input <code>searchStr</code> so user can see what is being searched and compare if its part of response. So below code is highlighting whole string response from server in my case i just want to highlight searched string that will be part of response. </p>
  
  <p>Lets assume i have string </p>
  
  <p><code>info|&lt;n/a&gt;|[routes.event] ########## Message added to processing queue ########## e63637db-aa33-4aed-b5b0-51a0764dc7f1 { workerId: 3, pid: 33029 }</code> and i want to highlight <code>e63637db-aa33-4aed-b5b0-51a0764dc7f1</code> _id that will be <code>searchStr</code></p>
  
  <p>main.html</p>
  
  <pre><code>&lt;tr ng-repeat="item in showMessages | filter:searchStr" &gt;
                      &lt;td &gt;{{item.filename}}&lt;/td&gt;
                      &lt;td class="serverResults" ng-bind-html="item.value | trusted"&gt;{{item.value}}&lt;/td&gt;
                  &lt;/tr&gt;
  </code></pre>
  
  <p>ctrl.js</p>
  
  <pre><code>$scope.$on('displaySearchResults',function(e,data){
          $scope.searchStr = data.searchStr;
          $scope.showMessages = data.messageObj;
      })
  </code></pre>
  
  <p>filters.js</p>
  
  <pre><code>angular.module('App').filter('trusted', ['$sce', function ($sce) {
      return function(text,phrase) {
      if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
                      '&lt;span class="highlighted"&gt;$1&lt;/span&gt;');
  
         var content = text.toString()
         console.log('Content',content);
         var data = content.replace(/[|&amp;;$%@"&lt;&gt;()+,]/g, "");
          return $sce.trustAsResourceUrl(data);
      };
  }]);
  </code></pre>