Angular code inside of html strings - html

Question

I am trying making the following code working:
var td = $(elem).treegrid('getPanel').find('div.datagrid-header td[field="itemtype"]');
td[0].innerHTML = td[0].innerHTML +
'<table style="width:100%;margin-top:-8px;margin-left:2px"><tr>' +
'<td style="width:18px;text-align:center">' +
'<a href="" ng-click="getFilteredAssets(filterItemType)">' +
'<img border="0" src="all_filter.png">' +
'</a>' +
'</td>' +
'</td>' +
'<td style="width:18px">' +
'<img src="assets_filter.png"/>' +
'</td>' +
'<td style="width:18px">' +
'<img src="projects_filter.gif"/>' +
'</td></tr></table>';
I am getting images into the place, but clicking on the image with ng-click specified doesn't do anything. Any idea how to make it work?
Thanks
Modified code
var element = $compile(angular.element
('<table style="width:100%;margin-top:-8px;margin-left:2px"><tr>' +
'<td style="width:18px;text-align:center">' +
'<a href="" ng-click="getFilteredAssets(filterItemType)">' +
'<img border="0" src="all_filter.png">' +
'</a>' +
'</td>' +
'</td>' +
'<td style="width:18px">' +
'<img src="assets_filter.png"/>' +
'</td>' +
'<td style="width:18px">' +
'<img src="projects_filter.gif"/>' +
'</td></tr></table>')
)(scope);
td[0].innerHTML = td[0].innerHTML + element;

Answer 1

Angular has no way of knowing you've added some HTML to your DOM. You should use a compile service. It will sweep HTML searching for ng-* directives and so on and apply it to current scope.
var element = $compile(angular.element('your html with ng-* directives''))(scope);
Then you can insert that element to your DOM.