Angularjs form passed through Ng-repeat shows value undefined.
I have the form below which I passed through angularjs ng-repeat. when I click on submit button, it alerts values undefined for variable PID,Username and email.If I take the form outside ng-repeat, everything works. can someone help me fix the issue. thanks
<!doctype html>
<html>
<head>
</head>
<body ng-app='myapp'>
<div class="content" ng-controller='fetchCtrl'>
<div class="post" ng-repeat='post in posts'>
<table>
<tr>
<td>post Id</td>
<td><input type='text' id='pid' ng-model='pid' value="{{post.id}}"></td>
</tr>
<tr>
<td>First Name</td>
<td><input type='text' id='username' ng-model='username'></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type='text' id='useremail' ng-model='useremail'></td>
</tr>
<tr>
<td> </td>
<td><input type='button' id='but_save' value='Save' ng-click="submitButton()" ></td>
</tr>
</table>
</div>
</div>
</div>
<!-- Script -->
<script src="angular.min.js"></script>
<script>
var fetch = angular.module('myapp', []);
fetch.controller('userCtrl', ['$scope', '$http', function ($scope, $http) {
// Add new record
$scope.submitButton = function(){
var username=$scope.username;
var email=$scope.useremail;
var pid=$scope.pid;
//alert variables values that is all I want
alert(username);
alert(email);
alert(pid);
// do http thing here if you like
$http({
});
}
// Fetch post data scope goes here
</script>
</body>
</html>