mark search string dynamically using angular.js

Question

How can I mark my search pattern dynamically in my html?
Example:

I\'m using angular

Answer 1

Angular UI is a great choice. You can also do it with filter like: http://embed.plnkr.co/XbCsxmfrgmdtOAeBZPUp/preview

The essence is as commented by @Hylianpuffball, dynamically create styled 'span' tags for the matches.

.filter('highlight', function($sce) {
  return function(text, phrase) {
    if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
      '$1')

    return $sce.trustAsHtml(text)
  }
})

And use it like: