Angular Js..., ng-click function doesn't work

Question

I'm new to AngularJs, my problem is that when I clicked the button that I append it doesn't call the function or the function doesn't work.

HTML

</tbody>
    <tr>
        <td><input type="text" class="form-control" ng-model="contact.name"/></td>
        <td><input type="text" class="form-control" ng-model="contact.email"/></td>
        <td><input type="text" class="form-control" ng-model="contact.number"/></td>
        <td colspan="2">
        <button class="btn btn-primary btn-block" ng-click="addContact()">Add Contact</button>
        </td>
    </tr>
    <tr ng-repeat="contact in contactlist">
        <td>{{contact.name}}</td>
        <td>{{contact.email}}</td>
        <td>{{contact.number}}</td>
        <td><button class="btn btn-danger" ng-click="removeContact(contact._id)"><i class="glyphicon glyphicon-trash"></i></button></td>
        <td><button class="btn btn-info" ng-click="editContact(contact._id)"><i class="glyphicon glyphicon-pencil"></i></button></td>
    </tr>
</tbody>

ANGULAR

$scope.editContact = function(id){
    $http.get('/contactlist/' + id).success(function(response){
        $scope.contact = response;

        var addButton = angular.element('#custom_btn');

        addButton.empty();

        addButton.append('<button class="btn btn-success btn-block" ng-click="update()">Update Contact</buton>');
    });
};

$scope.update = function(){
    alert('test');
};

what is wrong with my code. my idea is that it is the same with jQuery.. where all elements appended by jquery will have a body on its function call..

thanks in advance.

please put your html code,in order to see what's going on in the view — soroush gholamzadeh, Aug 11 '15 at 07:21
please read [this answer](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background/15012542#15012542) before starting out with Angular - it will save you a lot of headache — New Dev, Aug 11 '15 at 07:23
is it a typo?: you have `addContact()` but your real function is `editContact()` — soroush gholamzadeh, Aug 11 '15 at 07:25
@soroushgholamzadeh no.., no error in the code but when the button change.. to update... the ng-click doesn't work. — Sam Teng Wong, Aug 11 '15 at 07:28

score 2 · Accepted Answer · edited May 23 '17 at 12:22

First of all please read this discusstion.

You can use ng-if directive in the html view instead of JQuery:

<tr>
...
    <td colspan="2" id="custom_btn">
        <button class="btn btn-primary btn-block" ng-click="addContact()">Add Contact</button>
        <button ng-if="isEdited" class="btn btn-success btn-block" ng-click="update()">Update Contact</buton>
    </td>
</tr>

And in the editContact function:

$http.get('/contactlist/' + id).success(function(response){
    $scope.contact = response;

    $scope.isEdited = true;
});

Note: if you got error for update() use $parent.update() in the view.

Angular Js..., ng-click function doesn't work

1 Answers1