AngularJS Scope Variables not Updating

Question

Strange error here. I have this form:

<form name="newaccount" id="newaccount" ng-submit="doSubmit()">
<label>username</label>
<input name="username" type="text" required ng-model="username">
<span ui-toggle="username.length > 15">Too long!</span>
<label>name</label>
<input name="name" type="text" required ng-model="name">
<label>e-mail</label>
<input name="email" type="email" required ng-model="email" ui-validate>
<label>password</label>
<input name="password" type="password" required ng-model="password" ui-validate>
<div style="text-align: center;"><br>
<input type="submit"></div>
</form>

And this controller:

$scope.username = "f";
$scope.password = "f";
$scope.email = "f";
$scope.name = "f";
$scope.doSubmit = function(){
    //Transition to progress view
    $scope.showLoginForm = false;
    $scope.showCreateForm = false;
    $scope.showLoading = true;
    $scope.resultSuccess = false;
    $scope.showResult = false;
    $scope.loadingMessage = "Creating account...";
    $scope.resultReason = "Success!";

    //Send POST
    $http({
        method: 'POST',
        url: "php/createaccount.php",
        data: {
            "username": $scope.username,
            "password": $scope.password,
            "name": $scope.name,
            "email": $scope.email
        }}
    ).success(function (data, status, headers, config) {
            $scope.showLoading = false;
            $scope.showResult = true;
            $scope.resultSuccess = data === "success";
            if($scope.resultSuccess){
                $scope.resultReason = "Account created successfully!";
            }else{
                $scope.resultReason = data;
            }

        }).error(function (data, status, headers, config) {
            $scope.showLoading = false;
            $scope.showResult = true;
            $scope.resultSuccess = false;
            $scope.resultReason = data;
        });
};

As expected, "f" appears in each of the fields. However, if you change these fields and then submit the form, the server responds (with a print_r() on the post data) showing that the JSON received by the backend ALWAYS will contain "f" as the value for each of the fields, not the changed values.

Example: with username "test" etc.

{"username":"f","password":"f","name":"f","email":"f"}

Therefore, the values in $scope aren't getting updated for some reason when I type in the forms. What gives?

Answer 1

Instead of assigning individual $scope properties inside the $http call, use a "large object" on your scope: $scope.person = { username: 'f', ...}. Then you can just post that object.

It turned out the specific problem in this was that angular does not write values to scope variables unless they validate, in this case email wasn't validating properly.

Answer 2

Is the scope clearly defined using 'ng-app' and 'ng-controller'?

I could not find these two directives in your html. Perhaps you didnt include it as part of question.

A sample structure which i expected: http://angularjs.org/#todo-html