yobre/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
    <script src="bower_components/jquery-highlighttextarea/jquery.highlighttextarea.min.js"></script>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="bower_components/jquery-highlighttextarea/jquery.highlighttextarea.min.css">

    <script src="script/MainCtrl.js"></script>
</head>
<body ng-app="AngularTry">
<div class="container" style="padding-top: 50px;" ng-controller="MainCtrl">
    <div class="row">
        <div class="col-md-3">
            <h4>Highlight words:</h4>
            <pre>{{option.words | json}}</pre>
        </div>
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-12">
                    <textarea class="form-control"
                              rows="8" id="text"
                              ng-model="text"
                              bdt-highlight
                              bdt-option="option"></textarea>
                </div>
            </div>
            <div class="row" style="margin-top: 10px">
                <div class="col-md-12 text-center">
                    <button class="btn btn-primary" ng-click="try()">CHANGE WORD TO KIWI</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

## script_MainCtrl.js
angular.module('AngularTry', [])
    .directive('bdtHighlight', function() {
        return {
            restrict: 'A',
            scope: {
                opts: "=bdtOption"
            },
            link: function(scope, element, attrs) {
                console.log("scope.opts ", scope.opts);
                $(element).highlightTextarea(scope.opts);
                if (attrs.ngModel) {
                    scope.$watch(attrs.ngModel, function() {
                        console.log("scope.$watch attrs.ngModel, ->");
                        $(element).data('highlighter').highlight();
                    });
                }
                scope.$watch('opts', function(nVal, oVal) {
                    console.log("OlD --> ", oVal, " - NEW --> ", nVal);
                    if (!nVal && nVal == oVal) {
                        return;
                    }
                    console.log("----------> ", nVal);
                    $(element).highlightTextarea(nVal);
                    $(element).data('highlighter').highlight();
                });
            }
        };
    })
    .controller('MainCtrl', ["$scope", function($scope) {
        $scope.option = {
            words: ['apple', 'the', 'table'],
            color: '#5bc0de'
        };

        $scope.one = "Apple";

        $scope.text = "The apple is on the table. The kiwi is under the table.";

        $scope.try = function() {
            $scope.one = "Kiwi";
            var old = $scope.option.words[0];

            $scope.option = {
                words: ['kiwi', 'the', 'table'],
                color: '#5bc0de'
            };
            console.log("Change highlight word from --> ", old, " to --> ", $scope.option.words[0]);
        };

    }]);
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="bower_components/angular/angular.min.js"></script>
	<script src="bower_components/jquery/dist/jquery.min.js"></script>
	<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
	<script src="bower_components/jquery-highlighttextarea/jquery.highlighttextarea.min.js"></script>
	<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="bower_components/jquery-highlighttextarea/jquery.highlighttextarea.min.css">

	<script src="script/MainCtrl.js"></script>
	</head>
	<body ng-app="AngularTry">
	<div class="container" style="padding-top: 50px;" ng-controller="MainCtrl">
	<div class="row">
	<div class="col-md-3">
	<h4>Highlight words:</h4>
	<pre>{{option.words \| json}}</pre>
	</div>
	<div class="col-md-9">
	<div class="row">
	<div class="col-md-12">
	<textarea class="form-control"
	rows="8" id="text"
	ng-model="text"
	bdt-highlight
	bdt-option="option"></textarea>
	</div>
	</div>
	<div class="row" style="margin-top: 10px">
	<div class="col-md-12 text-center">
	<button class="btn btn-primary" ng-click="try()">CHANGE WORD TO KIWI</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>
	angular.module('AngularTry', [])
	.directive('bdtHighlight', function() {
	return {
	restrict: 'A',
	scope: {
	opts: "=bdtOption"
	},
	link: function(scope, element, attrs) {
	console.log("scope.opts ", scope.opts);
	$(element).highlightTextarea(scope.opts);
	if (attrs.ngModel) {
	scope.$watch(attrs.ngModel, function() {
	console.log("scope.$watch attrs.ngModel, ->");
	$(element).data('highlighter').highlight();
	});
	}
	scope.$watch('opts', function(nVal, oVal) {
	console.log("OlD --> ", oVal, " - NEW --> ", nVal);
	if (!nVal && nVal == oVal) {
	return;
	}
	console.log("----------> ", nVal);
	$(element).highlightTextarea(nVal);
	$(element).data('highlighter').highlight();
	});
	}
	};
	})
	.controller('MainCtrl', ["$scope", function($scope) {
	$scope.option = {
	words: ['apple', 'the', 'table'],
	color: '#5bc0de'
	};

	$scope.one = "Apple";

	$scope.text = "The apple is on the table. The kiwi is under the table.";

	$scope.try = function() {
	$scope.one = "Kiwi";
	var old = $scope.option.words[0];

	$scope.option = {
	words: ['kiwi', 'the', 'table'],
	color: '#5bc0de'
	};
	console.log("Change highlight word from --> ", old, " to --> ", $scope.option.words[0]);
	};

	}]);