Passing object to function in angular js

Question

Here I am trying to pass user entered data in to angular function so that i can send it to server. but data is not receing in function.

var app = angular.module('myApp', []);
            app.controller('myCtrl', function ($scope, $http) {
                  $scope.submitForm = function (data) {
                    console.log(data + " " + data.fname + " " + data.lname);
                    $http({
                        method: 'POST',
                        url: "update",
                        data: data,
                        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
                    }).success(function (result) {
                                              console.log(result);
                    });
                }
            });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div ng-app="myApp" ng-controller="myCtrl">
                        <form  name="update">
                            <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" id="fname" name="fname" placeholder="First Name"
                                           ng-bind="user.fname" data-validation="required" data-validation-error-msg="First Name required"/>
                                </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" id="lname" name="lname" placeholder="Last Name"
                                           ng-bind="user.lname" data-validation="required" data-validation-error-msg="Last  Name required"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-lg-4 col-md-4">
                                    <label for="submit" class="sr-only" >submit</label>
                                </div>
                                <div class="col-lg-8  col-md-8">
                                    <input type="submit"  class="form-control btn btn-success" id="update"
                                           ng-click="submitForm(user)"
                                           name="submit" placeholder="Submit"/>
                                </div>
                            </div>
                        </form>
                    </div>

Answer 1

Instead of ng-bind use ng-model

ng-bind="user.fname" ---> ng-model="user.fname",

use this for all form elements.