Not able to pass value in angular function - angularjs

Question

I am trying to pass expense object to submit function.
But it is not passing entered value
var app = angular.module('addApp', []);
app.controller('addController', function($scope, $http) {
console.log("SAdfasd");
$scope.expense = {param:'',value:0,dt:'',description:''};
$scope.exp = ["One ", "Two", "Three"];
$scope.submit = function(data) {
console.log(data);
console.log($scope.expense);
$http({
method: 'POST',
url: 'added'
data: $scope.expense,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).success(function(data, status, headers, config) {
console.log(data);
}).error(function(data, status, header, config) {
console.log(data);
}
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
<div class="col-lg-8 col-md-8" ng-app="addApp" ng-controller="addController">
<form id="addExpense" name="expenseForm" method="post">
<div>
<label>Expense Type</label>
<select ng-model="expense.param" ng-options="x for x in exp" class="form-control"></select>
</div>
<div>
<label>Amount</label>
<input type="text" name="value" class="form-control" ng-bind="expense.value" placeholder="Enter your expense amount" />
</div>
<div>
<label>Date</label>
<input type="date" name="dt" class="form-control" ng-bind="expense.dt" placeholder="Select expense date" />
</div>
<div>
<label>Description</label>
<textarea rows="4" cols="50" name="description" ng-bind="expense.description" class="form-control" placeholder="Enter your expense description"></textarea>
</div>
<div>
<button type="submit" class="btn btn-success form-control" ng-click="submit(expense)">Save</button>
</form>
</div>

Answer 1

You are using NgBind instead of that it should be NgModel :
var app = angular.module('addApp', []);
app.controller('addController', function($scope, $http) {
$scope.expense=
{param:'',value:0,dt:'',description:''};
$scope.exp = ["One ", "Two", "Three"];
$scope.submit = function() {
//console.log(object);
console.log($scope.expense);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
<div class="col-lg-8 col-md-8" ng-app="addApp" ng-controller="addController">
<form id="addExpense" name="expenseForm" method="post">
<div>
<label>Expense Type</label>
<select ng-model="expense.param" ng-options="x for x in exp" class="form-control"></select>
</div>
<div>
<label>Amount</label>
<input type="text" name="value" class="form-control" ng-model="expense.value" placeholder="Enter your expense amount" />
</div>
<div>
<label>Date</label>
<input type="date" name="dt" class="form-control" ng-model="expense.dt" placeholder="Select expense date" />
</div>
<div>
<label>Description</label>
<textarea rows="4" cols="50" name="description" ng-model="expense.description" class="form-control" placeholder="Enter your expense description"></textarea>
</div>
<div>
<button type="submit" class="btn btn-success form-control" ng-click="submit(expense)">Save</button>
</form>
</div>

Answer 2

You are sending JSON obejct to your action but it is expecting it in a Url Params. You can refer your query from here ParamSerializer.
So angular provide $httpParamSerializerJQLike service since 1.4.1
$http({
url: 'added',
method: 'POST',
data: $httpParamSerializerJQLike(data), // Make sure to inject the
service in to the controller
headers: {
'Content-Type': 'application/x-www-form-urlencoded' // header
}
}).then(function(response) { /* do something here */ });
Second way to do -
$http({
url: 'added',
method: 'POST',
data: 'param='+$scope.expense.param+'&value='+$scope.expense.value+'& dt='+$scope.expense.dt+ '& description='+$scope.expense.description OR 'param='+encodeURIComponent($scope.expense.param)+'&value='+encodeURIComponent$scope.expense.value)+'& dt=+encodeURIComponent$scope.expense.dt)+ '& description='+encodeURIComponent$scope.expense.description)
service in to the controller
headers: {
'Content-Type': 'application/x-www-form-urlencoded' // header
}
}).then(function(response) { /* do something here */ });
Please check the syntax's for comma i might have missed .