Highlight search term

<!DOCTYPE html>
<html>
  <head>
    <script data-require="angular.js@1.2.5" data-semver="1.2.5" src="http://code.angularjs.org/1.2.4/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    
    <style>
      .highlighted { background: yellow }
    </style>
  </head>

  <body ng-app="Demo">
    <h1>Hello Plunker!</h1>
    
    <div class="container" ng-controller="Demo">
      <input type="text" placeholder="Search" ng-model="search.title">
      
      <ul>
        <!-- with filter -->
        <li ng-repeat="item in data | filter:search.title"
            ng-bind-html="item.title | highlight:search.title">
        </li>
      </ul>
    </div>
    
    <script>
      angular.module('Demo', [])
        .controller('Demo', function($scope) {
          $scope.data = [
            { title: "Bad" },
            { title: "Good" },
            { title: "Great" },
            { title: "Cool" },
            { title: "Excellent" },
            { title: "Awesome" },
            { title: "Horrible" },
          ]
        })
        .filter('highlight', function($sce) {
          return function(text, phrase) {
            if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
              '<span class="highlighted">$1</span>')
            
            return $sce.trustAsHtml(text)
          }
        })
    </script>
  </body>
</html>

// Code goes here

/* Styles go here */