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

Just in case that someone (like me a moment ago) needs this for angular2:

highlight-pipe.ts:

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({name: 'highlightPipe'})
export class HighlightPipe implements PipeTransform{

  transform(text:string, filter:string) : any{
    if(filter){
      text = text.replace(new RegExp('('+filter+')', 'gi'), '$1');
    }
    return text;
  }
}

and use it like this:

at top of file:

import {HighlightPipe} from './highlight-pipe';

in template where 'yourText' is the original text and 'filter' is the part you want to highlight:

in component:

pipes: [HighlightPipe]

EDIT: I updated it for RC 4 and created a plunker for testing: http://plnkr.co/edit/SeNsuwFUUqZIHllP9nT0?p=preview