I'm implementing drag'n'drop directive. On drop I add a copy of element to my div and append ng-click attribute to it like this:
copy.append('<button class="close" ng-click="abc()">×</button>');
For example, in controller I have
$scope.abc = function () {
alert('Hello!');
}
And it doesn't work. If I add this button on page manually it works fine.
copy.append('<button class="close" ng-click="abc()">×</button>');
$compile(copy)($scope);
I guess that you do need to compile your new template so that AngularJS recognizes it.
The docs give you a good example for how to use ng.$compile.
Cloning can be done then like so:
var templateHTML = angular.element('<p>{{total}}</p>'),
scope = ....;
var clonedElement = $compile(templateHTML)(scope, function(clonedElement, scope) {
//attach the clone to DOM document at the right place
});
