angular post is sending null value to server - angularjs

Question

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.submitForm = function(cl) {
console.log(cl);
$http({
method: 'POST',
url: "updated-profile",
data: {
cl: cl
},
}).then(function successCallback(response) {
console.log("updated successfully");
$scope.success = "Updated successfully";
}, function errorCallback(response) {
console.log("not updated");
$scope.error = "Unable to update";
});
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="cl in clientList">
<div id="error-messages" ng-show="error">{{error}}</div>
<div id="success" ng-show="success">{{success}}</div>
<div class="form-group">
<div class="col-lg-4 col-md-4">
<label for="fname">First Name</label>
</div>
<div class="col-lg-8 col-md-8 ">
<input type="text" class="form-control" placeholder="First Name" ng-model="cl.fname" />
</div>
</div>
<div class="form-group">
<div class="col-lg-4 col-md-4">
<label for="lname">Last Name</label>
</div>
<div class="col-lg-8 col-md-8">
<input type="text " class="form-control" ng-model="cl.lname" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-4 col-md-4">
<label for="submit" class="sr-only">Update</label>
</div>
<div class="col-lg-8 col-md-8">
<input type="button" class="form-control btn btn-success" id="update" ng-click="submitForm(cl)" name="Update" value="Update" />
</div>
</div>
</div>
I am using above code to send data to server.
My server code is
public class Update extends ActionSupport {
private Client cl = new Client();
private String fname;
public String update() {
System.out.println("testing this");
System.out.println("client detail " + cl.getFname() + " " +
cl.getLname());
System.out.println("fname"+getFname());
}
}
I am getting
client detail null null
fnamenull
If I am using data: {fname: cl.fname}, then also fnamenull.
I am unable to pass any value using angular post to action.
What is wrong here?
What changes to made here to work it properly?

Answer 1

Your button
<input type="button" class="form-control btn btn-success" id="update" ng-click="submitForm(cl)" name="Update" value="Update" />
has to be inside the ng-repeat loop, otherwise it will not have access to the cl object as that is local to the ng-repeat scope.
Alternatively, if you want the button to be "global", you can submit the entire clientList in the ng-submit and then loop through the array inside your controller. It depends on your flow and what kind of UX/UI you need for the project.

Answer 2

$http({
method: 'POST',
url: "www.mylocalhost.com/api/updated-profile",
data: {
cl: cl
},
});
When you are calling a $http service "url" parameter shoul contain a proper api path. just use a valid api url . I hope it will work.
Or
change "cl":$scope.clientList