AngularJS using a filter to highlight a selected item.

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

app.controller('MainCtrl', function($scope) {
  $scope.words = [
    "beer",
    "wine",
    "whiskey",
    "vodka",
    "gin",
    "rum"
  ];
  
  $scope.text = "blah blah beer blah blah blah wine blah blah blah whiskey blah blah blah vodka blah blah blah blah blah gin blah blah blah blah blah rum blah blah blah blah beer blah blah blah blah vodka blah blah blah vodka blah blah blah blah blah blah vodka blah blah blah blah";
  
  $scope.selectedWord = '';

});

app.filter('highlightWord', function() {
    return function(text, selectedWord) {
      if(selectedWord) {
        var pattern = new RegExp(selectedWord, "g");
        return text.replace(pattern, '<span class="highlighted">' + selectedWord + '</span>');
      }
      else {
        return 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.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js" data-semver="1.0.7"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    Click: 
    <div style="border: red thin solid; width: 100px; padding: 10px;">
      <div ng-repeat="word in words"><a ng-click="$parent.selectedWord = word">{{word}}</a></div>
    </div>
    Selected:
    <div style="border: red thin solid; width: 100px; padding: 10px;" ng-bind-html-unsafe="text | highlightWord : selectedWord"></div>
    </div>
    Selected Word: {{selectedWord}}
  </body>

</html>

/* Put your css in here */

.highlighted {
 background-color: yellow; 
}