Ich habe folgenden HTML-Code

<li ng-repeat="contact in contacts">
 <label ng-style="myStyle">
<input type="checkbox" ng-click="deleteContact(contact._id); myStyle={'text-decoration': 'line-through'};"/>
<img src="./images/edit_inline.gif" width="16px" height="16px" ng-click="editContact(contact._id)"/> 
{{contact.username}}
{{contact.email}}
 </label>
</li>

Der Controller-Code lautet wie folgt:

function mainController($scope, $http) {

$scope.deleteContact = function(id) {
    $http.delete('/api/contacts/' + id)
        .success(function(data) {
            $scope.contacts = data;
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });
};

$scope.editContact = function(id) {
    $http.get('/api/search/'+id)
    .success(function(data) {
        $scope.formData = data;
    })
    .error(function(data) {
        console.log('Error: ' + data);
    });

}

}

Wenn ich auf das img-Tag klicke, um editContact aufzurufen, wird auch das Kontrollkästchen ng-click-Ereignis ausgelöst, wodurch der Datensatz gelöscht wird.

Ich kann nicht verstehen, wie das passiert. Ich bin neu in AngularJs, bitte führen