AngularJS 1.4.x

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

app.controller('MainCtrl', function($scope) {
 $scope.myData =
 [{
        "name": "Apple",
 },{
        "name": "Apricot",
 },{
        "name": "Avocado",
 },{
        "name": "Banana",
 },{
        "name": "Bell pepper",
 },{
        "name": "Bilberry",
 },{
        "name": "Blackberry",
 },{
        "name": "Blackcurrant",
 },{
        "name": "Blood orange",
 },{
        "name": "Blueberry",
 },{
        "name": "Boysenberry",
 },{
        "name": "Breadfruit",
 },{
        "name": "Canary melon",
 },{
        "name": "Cantaloupe",
 },{
        "name": "Cherimoya",
 },{
        "name": "Cherry",
 },{
        "name": "Chili pepper",
 },{
        "name": "Clementine",
 },{
        "name": "Cloudberry",
 },{
        "name": "Coconut",
 },{
        "name": "Cranberry",
 },{
        "name": "Cucumber",
 },{
        "name": "Currant",
 },{
        "name": "Damson",
 },{
        "name": "Date",
 },{
        "name": "Dragonfruit",
 },{
        "name": "Durian",
 },{
        "name": "Eggplant",
 },{
        "name": "Elderberry",
 },{
        "name": "Feijoa",
 },{
        "name": "Fig",
 },{
        "name": "Goji berry",
 },{
        "name": "Gooseberry",
 },{
        "name": "Grape",
 },{
        "name": "Grapefruit",
 },{
        "name": "Guava",
 },{
        "name": "Honeydew",
 },{
        "name": "Huckleberry",
 },{
        "name": "Jackfruit",
 },{
        "name": "Jambul",
 },{
        "name": "Jujube",
 },{
        "name": "Kiwi fruit",
 },{
        "name": "Kumquat",
 },{
        "name": "Lemon",
 },{
        "name": "Lime",
 },{
        "name": "Loquat",
 },{
        "name": "Lychee",
 },{
        "name": "Mandarine",
 },{
        "name": "Mango",
 },{
        "name": "Mulberry",
 },{
        "name": "Nectarine",
 },{
        "name": "Nut",
 },{
        "name": "Olive",
 },{
        "name": "Orange",
 },{
        "name": "Pamelo",
 },{
        "name": "Papaya",
 },{
        "name": "Passionfruit",
 },{
        "name": "Peach",
 },{
        "name": "Pear",
 },{
        "name": "Persimmon",
 },{
        "name": "Physalis",
 },{
        "name": "Pineapple",
 },{
        "name": "Plum",
 },{
        "name": "Pomegranate",
 },{
        "name": "Pomelo",
 },{
        "name": "Purple mangosteen",
 },{
        "name": "Quince",
 },{
        "name": "Raisin",
 },{
        "name": "Rambutan",
 },{
        "name": "Raspberry",
 },{
        "name": "Redcurrant",
 },{
        "name": "Rock melon",
 },{
        "name": "Salal berry",
 },{
        "name": "Satsuma",
 },{
        "name": "Star fruit",
 },{
        "name": "Strawberry",
 },{
        "name": "Tamarillo",
 },{
        "name": "Tangerine",
 },{
        "name": "Tomato",
 },{
        "name": "Ugli fruit",
 },{
        "name": "Watermelon"
 }];
 $scope.startWith = function(actual, expected) {
   var lowerStr = (actual + "").toLowerCase();
   return lowerStr.indexOf(expected.toLowerCase()) === 0;
 }
});
app.filter('highlightMatch', function($sce) {
    return function(words, search) {
      return $sce.trustAsHtml(search ? words.replace(new RegExp(`(${search})`, 'i'), '<span class="match">$1</span>') : words);
    }
});

<!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.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
   <div id="parentDiv">
    <input type="text" ng-model="search.name" class="searchText" id="search_txt" placeholder="Search Data" />
    <div id="childDiv">
      <p ng-repeat="obj in myData | filter:search:startWith" ng-bind-html="obj.name | highlightMatch:search.name">
      </p>
    </div>
  </div>
  </body>

</html>

/* Put your css in here */
.match {
  background-color:rgba(0, 128, 128, 0.4);
}