Angularjs: Error posting data. Variable undefined - angularjs

Question

This must be something really silly. I cannot get a simple form to work.
Worked through the bunch of links that google spits out but none helped.
I alwajs get the $scope.user undefined below.
This is the form ...
<form name="login" ng-submit="submitLogin()" ng-controller="LoginController">
<ul>
<li>
<input type="text" name="name" ng-model="user.name" placeholder="Username:">
</li>
<li>
<input type='password' name="pass" ng-model="user.pass" placeholder="Password:">
</li>
</ul>
<button type="submit">Submit</button>
</form>
And this is the controller...
basal.controller('LoginController', function($scope, $http) {
$scope.submitLogin = function() {
$http.post('/users', $scope.user)
.success(function(data) {
console.log(data);
alert("Form post good!");
})
.error(function() {
alert(angular.toJson($scope.user));
});
};
});
What am I doing wrong?
How does bi-direction works? How do we know of when the data is passed from the controller to the view and the other way round - from the view to the controller. I get the feeling that this is where my misunderstanding lies.
Thanks.

Answer 1

Your user is never defined or initialised.
Try username and userpass as ng-model definitions like this:
<li>
<input type="text" name="name" ng-model="username" placeholder="Username:">
</li>
<li>
<input type='password' name="pass" ng-model="userpass" placeholder="Password:">
</li>
And then add accordingly
$http.post('/users', {name: $scope.username, pass: $scope.userpass})
Or, as mentioned in the comments, define $scope.user as {} in your Controller

Answer 2

Initialize $scope.user = {} in the first line of your controller.
basal.controller('LoginController', function($scope, $http) {
$scope.user = {};
$scope.submitLogin = function() {
...
In your example, $scope.user == null. The form doesn't create a new object container for you.