AngularJS 1.5.x

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  
  $scope.data = [
      { text: "<< ==== Put text to Search ===== >>" }
    ];
    
  $scope.data = [{
 title: "Bad",
 name: 'bill'
}, {
 title: "Good",
 name: 'Goe'
}, {
 title: "Great",
 name: 'Brad'
}, {
 title: "Cool",
 name: 'yan'
}, {
 title: "Excellent",
 name: 'mikle'
}, {
 title: "Awesome",
 name: 'mosa'
}, {
 title: "Horrible",
 name: 'morteza'
} ];

})
.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)
    }
  });

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <h1>Highlight text using AngularJS.</h1>

    <div class="container" >
      <input type="text" placeholder="Search" ng-model="search">

      <ul>
        <!-- filter code -->
        <li ng-repeat="item in data ">
           <span ng-bind-html="item.title +' '+ item.name | highlight:search"></span>

        </li>
      </ul>
    </div>
    
  </body>

</html>

/* Put your css in here */

.highlighted { background: yellow }