Why does the ng-click handler run twice?

Question

I have a button that I used to delete the question:

<a class="btn-small float-right" data-ng-click="deleteQuestion(question)"> <i data-ng-class="{true: 'icon-step-backward', false: 'icon-remove'} [question.IsDeleted]"></i> </a> 

This is the code behind the button:

 $scope.deleteQuestion = function (data) { if (data.IsDeleted) { data.IsDeleted = false; for (var i = 0; i < deletedQuestions.length; i++) { if (deletedQuestions[i] == data) { deletedQuestions.splice(i, 1); } } } else { data.IsDeleted = true; if ($.inArray(data, deletedQuestions) === -1) { deletedQuestions.push(data); } } }; 

Now, when I press the button, I noticed that the function was run twice. The first time he removes this question, the second time he cancels this action.

I want one button to delete the question, and when you click on it again, it cancels this action.

I'm just wondering what I forgot ...

EDIT Here is the fiddle: http://jsfiddle.net/rquackenbush/AbWKs/

Answer 1

I found out what the problem is.

The link is inside the list:

 <li class="question-item" data-app-bind-html="question.template"> <a class="btn-small float-right" data-ng-click="deleteQuestion(question)"> <i data-ng-class="{true: 'icon-step-backward', false: 'icon-remove'} [question.IsDeleted]"> </i> </a> <li> 

I created data-app-bind-html that binds the html part inside it. This led to the link being tied twice, which also led to the fact that it worked twice. To solve this problem, I just made sure that the directive binds the html element, not the entire list.