Я новичок в Angular JS, и я настроил базовую HTML-страницу с таблицей элементов.Я хочу иметь возможность удалять каждый элемент отдельно, поэтому я добавил столбец, содержащий кнопку удаления, для каждой строки моей таблицы HTML.Вот как выглядит этот столбец.
<td headers="deleteRoleHeader" class="cell-texte">
<span class="glyphicon glyphicon-trash" ng-click="deleteRole();"></span>
</td>
И моя функция Angular JS:
$scope.deleteRole = function(){
var data = {
codeRole: $scope.code_role,
descRole : $scope.desc_role
};
console.log(data);
};
Моя проблема заключается в том, что каждый раз, когда я нажимаю кнопку удаления, моя функция вызывается еще разчем в прошлый раз.Чтобы уточнить: при первом щелчке функция вызывается один раз, при втором нажатии функция вызывается дважды и т. Д.
Мне бы хотелось, чтобы моя функция вызывалась только один раз, когда я нажимаю кнопку удаления.
Кто-нибудь сталкивался с подобной проблемой?Я прочитал много вопросов о стековом потоке о функциях, вызываемых несколько раз, но мне не удалось решить эту проблему.
Заранее благодарен за помощь.
РЕДАКТИРОВАТЬ: вот моя консольвывод после двух кликов 
РЕДАКТИРОВАТЬ 2: Я выяснил, в чем причина проблемы: у меня настроен модал, выступающий в качестве подтверждения, и если я его уберумой код ведет себя так, как и должен (только один вызов функции) Вот скрипка, которая воспроизводит проблему: https://jsfiddle.net/w6edum0f/12/.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.roles = [
{
"codeRole": "test",
"descRole": "test desc"
},
{"codeRole": "test2",
"descRole": "test desc1"
}
];
$scope.selectRole = function(role) {
$scope.code_role = role.codeRole;
$scope.desc_role = role.descRole;
};
$scope.deleteRole = function(){
$('#deleteModal').show();
$('#deleteBtn').click(function(){
$('#deleteModal').hide();
var data = {
codeRole: $scope.code_role,
descRole : $scope.desc_role
};
console.log(data);
});
};
});