ng-click not firing any event - php

Question

here it is my html part from where i m trying to enter details ..
<div ng-app="angularPHP">
<div ng-controller="mainpagecntl">
<div id="customer" class="cuscontainer" hidden="hidden">
<div>
<h3 class="modal-title" >Add customer</h3>
<i class="fa fa-times" id="clo" aria-hidden="true"></i>
</div>
<table>
<tr>
<div class="form-group" >
<td><label id="label" class="control-label">customer Name:</label>
<td><input type="text" class="form-control" ng-model="customer_name" />
</div>
</tr>
<tr>
<div class="form-group">
<td><label id="label" class="control-label">Address:</label></td>
<td><input type="text" class="form-control" ng-model="customer_add"/></td>
</div>
</tr>
</table>
<div class="madal-footer">
<button class="btn btn-primary" ng-click="custadd()">ADD</button><br />
</div>
</div>
</div>
</div>
here is my angular-js part..
var app = angular.module('angularPHP', []);
app.controller('mainpagecntl', function($http,$scope)
{
$scope.custadd= function()
{
data={
cname :$scope.customer_name,
cadd: $scope.customer_add,
}
$http.post("../pos_system/Widgets/addcust.php?add",data).success(function(data)
{
});
}
});
but when i click on button nothing happened my ng-click function is not firing.

Answer 1

try adding ng-controller="myCtrl"at the <div id="customer" class="cuscontainer" hidden="hidden"> like this
<div id="customer" class="cuscontainer" hidden="hidden" ng-controller="myCtrl">

Answer 2

Are you sure the function is not firing at all? It may be firing but just failing to post the data. console.log something straight away inside the function to check e.g.
var app = angular.module('angularPHP', []);
app.controller('mainpagecntl', function($http,$scope) {
var vm = this;
vm.custadd = function() {
console.log('test');
var data = { cname :$scope.customer_name, cadd: $scope.customer_add};
$http.post("../pos_system/Widgets/addcust.php?add",data)
.success(function(data) {
console.log(data);
});
}
}
Then your ng-click should look like this
ng-click='vm.custadd()'
See if that makes any difference.
Note: Your ng-controller should also look like
ng-controller="mainpagecntl as vm"
as noted in the comments below.

Answer 3

Here's the working demo https://plnkr.co/edit/k7yApAavre66KFAiVlOp?p=preview for your code and it worked perfectly when I clicked on Add button. Although I have removed some div tags from table as it's bad practice and Angular will not identify those tags when its directives are used on them.
var app = angular.module('angularPHP', []);
app.controller('mainpagecntl', function($http, $scope) {
$scope.custadd = function() {
$scope.data = {
cname: $scope.customer_name,
cadd: $scope.customer_add,
}
// $http.post("../pos_system/Widgets/addcust.php?add", data).success(function(data) {});
}
});