Angularjs adding directive on click - angularjs

Question

i have table that has this body
<tbody >
<tr ng-repeat="con in mycon | array | filter:search | orderBy:predicate:reverse"
ng-click="showhistory($event,con.conid)">
<td >{{ con.fname }}</td>
<td >{{ con.lname }}</td>
</tr>
</tbody>
When the row is click i call this function my my controller
$scope.showhistory = function ($event,cid) {
$event.stopPropagation();
var contentTr = angular.element('<con_history ></con_history>');
contentTr.insertAfter(angular.element($event.target).parent());
$compile(contentTr)($scope);
$scope.$apply
};
And i can see that the con_history tags get added. But it doesn't render the directive. When I add the directive i do not see BLAH BLAH , I only see the con_history tag
this is my directive
app.directive('con_history', function() {
return {
restrict: 'AE',
replace: 'true',
template: '<tr><td colspan="11">BLAH BLAH</td></tr>'
};
});
thanks for any help

Answer 1

You are not doing it in angular way, I think this is what you want to do:
<tr ng-repeat="con in mycon | array | filter:search | orderBy:predicate:reverse"
ng-click="showhistory($event,con.conid)">
<td >{{ con.fname }}</td>
<td >{{ con.lname }}</td>
</tr>
<con_history ng-if="historyVisible[con.conid]"></con_history>
in your controller
$scope.historyVisible = {};
$scope.showhistory = function ($event,cid) {
.
.
$scope.historyVisible[cid] = true;
.
.
};