javascript - ng-click not firing on a button click -

i facing weird error not able call function on ng-click when button clicked.

this block of code ng-click not working delete button working edit button.

  <table ng-table="tableparams" class="table table-striped table-bordered pages_table">                         <thead>                             <td><b>id</b></td>                             <td><b>image</b></td>                             <td><b>alt</b></td>                             <td><b>edit</b></td>                             <td><b>delete</b></td>                         </thead>                         <tbody>                             <tr ng-repeat="dat in newdata">                                 <td>((dat.id))</td>                                     <td class="clients_review_admin_item"><img src="((imagepath+'/'+dat.image))" alt="" style="height:100px;width:150px" /></td>                                 <td>((dat.alt))</td>                                                                                     <td><button type="button" class="btn btn-info rounded-buttons" data-toggle="modal" data-target="#editwhy" ng-click="editwhy(dat)" ><i class="fa fa-pencil"></i></button></td>                                 <td>                             <button class="btn btn-danger rounded-buttons" type="button"   ng-click="deletefooter(dat.id,dat.alt)"><i class="fa fa-close"></i></button>                                 </td>                             </tr>                         </tbody>                     </table> 

the javascript function deletefooter

$scope.deletefooter = function(id,name){ console.log("called");      var posturl = apiurl+"/delfriendfooter";       var $inputs = {          id:id,          token:$scope.token,       };      var func = function(){                  $http.post(posturl, $inputs).                    success(function(data, status, headers, config) {                                  swal("deleted!", name+" has been deleted!", "success");                               var dat = $scope.newdata;                          for(var i=0,len= dat.length;i<len;i++){                              if(dat[i].id==id){                                  dat.splice(i,1);                                  break;                              }                          }                                                                                      }).                    error(function(data, status, headers, config) {                              sweetalert("oops!!", "please try again!!", "error");                    });      }   $scope.deletepopup(func,name);                        

};

the weird thing is working edit functionality

 <td><button class="btn btn-info rounded-buttons" data-toggle="modal" data-target="#editwhy" ng-click="editwhy(dat)" ><i class="fa fa-pencil"></i></button></td> 

i have tried call other functions not firing.

note: have changed angular braces (()).

this happening because of the way angular / buttons / forms work.

specifically:

to prevent double execution of handler, use 1 of ngsubmit or ngclick directives. because of following form submission rules in html specification:

• if form has 1 input field hitting enter in field triggers form submit (ngsubmit)
• if form has 2+ input fields , no buttons or input[type=submit] hitting enter doesn't trigger submit
• if form has 1 or more input fields , 1 or more buttons or input[type=submit] hitting enter in of input fields trigger click handler on first button or input[type=submit] (ngclick) , submit handler on enclosing form (ngsubmit)

because of these rules, buttons can behave little strangely.

a solution add type="button" buttons. prevent these rules being applied:

<button type="button" class="btn btn-danger rounded-buttons"  ng-click="deletefooter(dat.id,dat.alt)"><i class="fa fa-close"></i></button> 

angular then, instead of using form standards decide function call, execute ng-click's function.