AngularJS and ASP.NET MVC data insert issue - angularjs

Question

I am inserting Data using AngularJS and ASP.NET MVC.
But I am facing issue that the data is inserted null.
What should I do?
This is AngularJS file:
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope, $http) {
debugger;
$scope.InsertData = function () {
var Action = document.getElementById("btnSave").getAttribute("value");
if (Action == "Submit") {
$scope.User = {};
$scope.User.Username = $scope.Username;
alert($scope.Username);
$scope.User.Password = $scope.Password;
$scope.User.Email = $scope.Email;
$scope.User.Phone = $scope.Phone;
$scope.User.DOB = $scope.DOB;
$http({
method: "post",
url: "http://localhost:2776/Account/Insert_Employee",
datatype: "json",
data: JSON.stringify($scope.User)
}).then(function (response) {
alert("inserted");
});
}
};
});
This is HTML file:
<div class="tab-content" ng-controller="myCtrl">
<div class="tab-pane active" id="register">
<h3>Register Now !!!</h3>
<p class="text-muted">Be cool and join today. Meet millions</p>
<!--Register Form-->
<form name="registration_form" id='registration_form' class="form-inline">
<div class="row">
<div class="form-group col-xs-6">
<label for="Username" class="sr-only">User Name</label>
<input id="Username" ng-model="Username" class="form-control input-group-lg" type="text" name="Username" title="Enter User name" placeholder="User name" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-12">
<label for="email" class="sr-only">Email</label>
<input ng-model="Email" id="email" class="form-control input-group-lg" type="text" name="Email" title="Enter Email" placeholder="Your Email" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-12">
<label for="Phone" class="sr-only">Phone</label>
<input ng-model="Phone" id="Phone" class="form-control input-group-lg" type="text" name="Phone" title="Enter Phone" placeholder="Your Phone" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-12">
<label for="password" class="sr-only">Password</label>
<input ng-model="Password" id="password" class="form-control input-group-lg" type="password" name="password" title="Enter password" placeholder="Password" />
</div>
</div>
<div class="row">
<p class="birth"><strong>Date of Birth</strong></p>
<div class="form-group col-sm-3 col-xs-6">
<label for="month" class="sr-only"></label>
<select class="form-control" id="day">
<option value="Day" disabled selected>Day</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
</div>
<div class="form-group col-sm-3 col-xs-6">
<label for="month" class="sr-only"></label>
<select class="form-control" id="month">
<option value="month" ng-model="DOB" disabled selected>Month</option>
<option>Jan</option>
<option>Feb</option>
<option>Mar</option>
<option>Apr</option>
<option>May</option>
<option>Jun</option>
<option>Jul</option>
<option>Aug</option>
<option>Sep</option>
<option>Oct</option>
<option>Nov</option>
<option>Dec</option>
</select>
</div>
<div class="form-group col-sm-6 col-xs-12">
<label for="year" class="sr-only"></label>
<select class="form-control" id="year">
<option value="year" disabled selected>Year</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
</select>
</div>
</div>
<div class="form-group gender">
<label class="radio-inline">
<input type="radio" name="optradio" checked>Male
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Female
</label>
</div>
</form><!--Register Now Form Ends-->
<p>Already have an account?</p>
<button id="btnSave" value="Submit" class="btn btn-primary" ng-click="InsertData()">Register Now</button>
</div>
</div>
This is ASP.NET controller:
public string Insert_Employee(User User)
{
if (User != null)
{
using (Database1Entities Obj = new Database1Entities())
{
Obj.Users.Add(User);
Obj.SaveChanges();
return "Employee Added Successfully";
}
}
else
{
return "Employee Not Inserted! Try Again";
}
}
I am entering data, but data is inserted as null into db. What should I do no?
I have added <body ng-app="myApp">
According to me there is no error
can anyone help?

Answer 1

Try to wrote in this way your ajax call:
$http({
method: "post",
url: "http://localhost:2776/Account/Insert_Employee",
datatype: "json",
data: {user:$scope.User}
}).then(function (response) {
alert("inserted");
});