Why in angularjs .append is acting as .html? - angularjs

Question

I am trying to append new row to a table, where existing rows are created by ng-repeat. But, when i click on add new button rater than appending a new row, it is removing the existing rows and adding new. can any one please help me in this regard ?
here is the code and fiddle link.
var app = angular.module("app", []);
app.controller("simpleController", function($scope)
{
var descriptions = ['item1','item2','tem3'];
$scope.items = descriptions;
});
app.directive("addRow",function($compile)
{
var newRow;
newRow = '<tr><td>New Description</td><td><a href="javascript:void(0)" add-row>+</a></td><td><a href="javascript:void(0)" delete-row>-</a></td></tr>';
return{
restrict: 'A',
link: function(scope, element,attrs,controller){
element.on("click", function() {
console.log("clicked on activity add row");
$compile(element.parent().parent().parent().append(newRow))(scope);
});
}
}

Answer 1

Whenever we want to insert new element inside angular element, it will not understand by angular directly.
First we need to run that element through compile using $compile API, then append it to element.
You need to code like below. You need to first $compile you element then append it to element.
element.on("click", function() {
console.log("clicked on activity add row");
element.parent().parent().parent().append($compile(newRow)(scope));
});
Working Fiddle
As per #huanfeng observation, <tr> is not working properly, Its get converted to span. After goggling I found, there is issue with AngularJS. For solving this you can use any of the working solution from issue link.
Update 1
Instead of appending element you can do this by more Simpler way
Only push variable inside your ng-repeat array i.e. $scope.items.push('New Description'). ng-repeat will render one more for you with your specified description.
Thanks.