AngularJS ng-click doesn't fire - angularjs

Question

I generate some a Tags dynamically from a json file and add them like this to the page:
for(var i = 0; i < currentScene.hotpoints.hotpoint.length; i++)
{
var hotpoint = currentScene.hotpoints.hotpoint[i];
var pos = hotpoint.pos.split(";");
var x = parseFloat(pos[0]) * multiplierX;
var y = parseFloat(pos[1]) * multiplierY;
htmlstring += '<a href ng-controller="main" id="hp'+ hotpoint.ID + '" class="hotpoint animated infinite" style="top: ' + parseInt(y) + 'px; left: ' + parseInt(x) + 'px;" ng-click="enterScene(' +hotpoint.sceneID + ',' + hotpoint.ID +')"></a>';
}
$scope.hotpoints = $sce.trustAsHtml(htmlstring);
That works great. Now like you see I want to enable the click event for each element. So I use ng-click. But it doesn't get fired.
When I add this ng-click to an "static" element which is already on the site everything works.
What I have to care about that this works?
Thanks

Answer 1

Yes... $compile shall be used for this..
(function(){
"use strict";
angular.module("CompileDirective", [])
.directive('dynamicElement', ['$compile', function ($compile) {
return {
restrict: 'E',
scope: {
message: "="
},
replace: true,
link: function(scope, element, attrs) {
var template = $compile(scope.message)(scope);
element.replaceWith(template);
},
controller: ['$scope', function($scope) {
$scope.clickMe = function(){
alert("hi")
};
}]
}
}])
.controller("DemoController", ["$scope", function($scope){
$scope.htmlString = '<div><input type="button" ng-click="clickMe()" value="click me!"/> </div>';
}])
}());
With the following HTML:
<div ng-controller="DemoController">
<dynamic-element message='htmlString'></dynamic-element>
</div>
OR you may also go for injecting $compile in controller..
app.controller('AppController', function ($scope, $compile) {
var $el = $('<td contenteditable><input type="text" class="editBox" value=""/></td>' +
'<td contenteditable><input type="text" class="editBox" value=""/></td>' +
'<td>' +
'<span>' +
'<button id="createHost" class="btn btn-mini btn-success" data-ng-click="create()"><b>Create</b></button>' +
'</span>' +
'</td>').appendTo('#newTransaction');
$compile($el)($scope);
$scope.create = function(){
console.log('clicked')
}
})
And the easiest way..
$("#dynamicContent").html(
$compile(
"<button ng-click='count = count + 1' ng-init='count=0'>Increment</button><span>count: {{count}} </span>"
)(scope)
);