In order for Angular to be aware of your added element and do its magic, you need to $compile
the element and link it to a scope.
So you'll need a controller with a scope. You also need to replace the onclick
handlers with ng-click
and also $compile
the element:
In HTML:
<input type="button" value="..." ng-click="addHtmlAtCaret(...)">
In JS:
app.controller('ctrl', function ($compile, $scope) {
$scope.addHtmlAtCaret = function (html) {
document.getElementById('test').focus();
...
var el = document.createElement("div");
el.innerHTML = html;
$compile(el)($scope);
...
};
});
See, also, this short demo.