ng-click not working when element compiled in controller - angularjs

Question

How do I use $compile to get ng-click working on a block of code? My code currently displays a suggestion box when the parameters for a particular event are met. However, I want to let the user hide the suggestion box by clicking on the close button.
View
<textarea class="form-control suggest"
ng-keyup="vm.suggestActivate($event.keyCode)"
ng-mouseenter="vm.suggestActivate(32)"
rows="3"
ng-model="vm.summaryData"></textarea>
Controller
var vm = this;
var suggestionElement = document.createElement('div');
vm.suggestActivate = function(keyCode) {
if(keyCode === 32) {
if(vm.summaryData) {
var words = vm.words;
var suggestions = null;
suggestions = '<div style="padding-bottom: 20px"><strong>Suggested next word:</strong></div>'
for(var i = 0; i < 5; i++) {
suggestions += '<div style="padding-bottom: 20px">' + words[Math.floor(Math.random() * words.length)] + '</div>';
}
suggestions += '<div class="btn btn-default" ng-click="vm.suggestDeactivate()">Close</div>'
suggestionElement.innerHTML = suggestions;
suggestionElement.setAttribute('style', 'background: #B0B0B0; padding: 20px; position: relative; top: -3.9em; width: 25%');
suggestionElement.style.display = 'block';
var targetElement = event.srcElement;
targetElement.parentNode.appendChild(suggestionElement);
}
}
else {
suggestionElement.style.display = 'none';
}
};

Answer 1

try with $compile
targetElement.parentNode.appendChild($compile(suggestionElement)($scope));
mention that you have to inject $compile first.
ADD:
use angular.element to add new elements to DOM.
refer below demo:
angular.module("app", [])
.controller("myCtrl", function($scope, $compile) {
$scope.add = function() {
var strNewElement = document.createElement('div');
strNewElement.innerHTML = '<button ng-click="test()">Test</button>';
angular.element(event.srcElement.parentNode).append($compile(strNewElement)($scope));
};
$scope.test = function() {
alert('I am new element.');
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<textarea ng-keypress="add()" rows="3"></textarea>
</div>