Can't invoke action on the button inside ng-repeat directive - angularjs

Question

I'm new to AngularJS, and while playing with it, i have encountered with the problem.... I have a table like this :
...
<tr ng-repeat="line in lines">
<remove-line>
<input id="line_id" type="hidden" value="{{line.id}}">
<td id="sn">{{$index+1}}</td>
<td>{{line.ref}}</td>
<td>{{line.label}}</td>
<td class="tva">{{line.tva}}</td>
<td class="qty">{{line.qty}}</td>
<td class="unity">{{line.unity}}</td>
<td class="prix">{{line.prix}}</td>
<td>{{line.prix*line.qty}}</td>
<td><button class="btn" id= "remove"><i class="icon-remove"></i> </button></td>
</remove-line>
</tr>
...
I want to have some behavior when clicking on the remove button, using custom directive. AngularJS code looks like :
angular.module('myApp', []).directive('removeLine',function(){
var remove = function(){
...
alert ("Oops removed!");
}
return {
restrict: 'E',
link : function(scope,element, attrs){
$("#remove").on('click', remove);
}
};
});
But this doesn't work.... Nothing happens when i click on the remove button in the table..... But all this work fine when the button is out of the tag. Why is it so and how make it work?
I have created jsfiddle to illustrate my situation http://jsfiddle.net/alexrussinov/cs8RP/71/. What is strange that when I test this code on my local machine buttons in the table don't work but two separate under it, work fine. On jsfiddle, neither in the table nor below it, it doesn't work.

Answer 1

You can't have multiple elements on a page with the same ID, which is what you're doing with the button.
I think the simplest solution would be to stick the remove() call directly in the button tag with ng-click, passing in the line that you wish to remove. This of course assumes that your remove() method is part of $scope.
<button class="btn" ng-click="remove(line)"><i class="icon-remove"></i></button>