How to add and remove div with posts between table rows angularjs ? - angularjs

Question

I have a table with staff are represented as a table. I would like by click on item show list with comments for current employee with input below to support adding new comment.
In my directive I try to write a new element or delete all of the depends on state flag. When I decide to support many comments I made a sophisticated code with open\closed tags and my dataset inside them. I do this because I would like to have an id for container which can be found a deleted with all children like this:
var feedback = document.getElementById(id);
feedback.remove();
But when angular create and add my element (which is made open) in the output it is closed automatically and all my dataset are represented such as nest elements. Below I show just a simplified example what I have right now:
var closeTag = angular.element(
'<div>' +
'<input id="name" type="text" ng-model="feedbackValue" ng-minlength="1" required>' +
'<input add-new-team type="submit" value="Add new feedback">' +
'</div>' +
'</td>' +
'</tr>' +
'</div>'
);
return {
restrict: 'A',
controller: function($scope, $element, $attrs) {
$scope.state = 'off';
$scope.toggle = function() {
$scope.$apply(function() {
console.log($element.children().length);
var name = $element.children()[0].attributes["data-value"].value;
var feedbackSet = teamSharedObj.feedback[name];
var id = "feedBackFor" + name.replace(/\s+/g, '');;
var openTag = angular.element(
'<div id=' + id + '>' +
'</tr><tr>' +
'<td colspan="4">'
);
$compile(openTag)($scope);
$element.after(openTag);
$scope.state = ($scope.state === 'on' ? 'off' : 'on');
if ($scope.state === "on") {
console.log("Feedback " + feedbackSet);
if (typeof feedbackSet === "undefined") {
var noFeedback = angular.element(
'<div id="feedbackContainer">' +
"No information. Does he work on any project?" +
'</div>'
);
$compile(openTag)($scope);
$element.after(openTag);
$compile(noFeedback)($scope);
openTag.after(noFeedback);
$compile(closeTag)($scope);
noFeedback.after(closeTag);
return;
}
// // TODO show all feed rows, setup id as a name
} else {
// TODO destroy a div container as a name
console.log("state is off");
var feedback = document.getElementById(id);
feedback.remove();
}
});
};
this.getState = function() {
return $scope.state;
};
},
link: function( scope, element, attrs ) {
element.bind('click', function() {
scope.toggle();
});
}
The question is how to show and maintain collection of elements from directive dynamically and how to delete them? Do you now simpler or more natural way for angular to do that?