AngularJs Expression not working - angularjs

Question

I have a weird issue with the {{json_req}} expression, the {{pseudo}} and {{password}} expression are working well, I can see the changes I make in live.
But nothing happened for the {{json_req}} expression, no matter what I write on the Login and Password input.
I guess It's a basic mistake by me but I'm a little lost with this one right now :/.
Thanks for the help :)
Login.html
<div class="row">
Pseudo : {{pseudo}}
</div>
<div class="row">
Password : {{password}}
</div>
<div class="row">
json : {{json_req}}
</div>
<div class="row">
<label class="float-center">
Pseudo
<input ng-model="pseudo" type="text" required>
<span class="form-error">
Pseudo Missing.
</span>
</label>
</div>
<div class="row">
<label class="float-center">
Password
<input ng-model="password" type="password" required>
<span class="form-error">
Password Missing.
</span>
</label>
</div>
LoginCtrl.js
mCtrl.controller('LoginCtrl', ['$scope', 'User', function ($scope, User) {
$scope.json_req = {
pseudo: $scope.pseudo,
password: $scope.password
};
$scope.LoginUser = function () {
if ($scope.json_req.pseudo != undefined && $scope.json_req.password != undefined) {
User.login($scope.json_req).then(function (data) {
$scope.response = data;
$scope.json_req = {};
});
} else
console.log("UNDEFINED");
};
}]);

Answer 1

This is expected behaviour. When you write:
$scope.json_req = {
pseudo: $scope.pseudo,
password: $scope.password
};
you create a "snapshot" of the values for $scope.pseudo and $scope.password. They will not update when you change model later.
You could setup a $scope.$watch and update json_req when either of pseudo or password changes (not really recommended). Or what I would recommend, write a getter function on the scope:
Object.defineProperty($scope, 'json_req', {
get: function() {
return {
pseudo: $scope.pseudo,
password: $scope.password
}
}
});

Answer 2

Try this:
angular.module("asdfapp",[]).service("User",function(){}).controller('LoginCtrl', ['$scope', 'User',
function ($scope, User) {
$scope.json_req = {
pseudo: "",
password: ""
};
$scope.LoginUser = function () {
if ($scope.json_req.pseudo != undefined
&& $scope.json_req.password != undefined) {
User.login($scope.json_req).then(function (data) {
$scope.response = data;
$scope.json_req = {};
});
} else
console.log("UNDEFINED");
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="asdfapp" ng-controller="LoginCtrl">
<div class="row">
Pseudo : {{json_req.pseudo}}
</div>
<div class="row">
Password : {{json_req.password}}
</div>
<div class="row">
json : {{json_req}}
</div>
<div class="row">
<label class="float-center">
Pseudo
<input ng-model="json_req.pseudo" type="text" required>
<span class="form-error">
Pseudo Missing.
</span>
</label>
</div>
<div class="row">
<label class="float-center">
Password
<input ng-model="json_req.password" type="password" required>
<span class="form-error">
Password Missing.
</span>
</label>
</div>
</div>

Answer 3

Ok I find the solution. And is expected It was a stupid mistake from me xD
I should write ng-model="json_req.pseudo" and not ng-model="pseudo" to fill the json_req object :/
Sorry to have bothered you guys !
Thanks