Error with binding text input

Question

i have this strange thing that happens in my application every time it starts, but first the code

HTML

<form ng-submit="login()" class="login">
    <input type="text" ng-model="data.username" placeholder="username" value="username" class="form-control" popover="inserisci qui il tuo username" popover-trigger="focus" popover-placement="right"></input><br>
    <input type="password" ng-model="data.password" placeholder="password" value="password" class="form-control" popover="inserisci qua la tua password" popover-trigger="focus" popover-placement="right"><br>


    <input class="btn-primary btn-lg" type="submit" value="Login">

JS

var loginCtrl=function($scope,$http,$modalInstance,$state){

$scope.data = {username : '',password:''};
var data=$scope.data;
$scope.login=function(){
    $http.post(server[0]+someurl,{name:data.username,password:data.password})
    .then(function (response) {
                var status=response.status;
                loggedOk=true;
                $state.go('home',{username:data.username,logged:status});
                $modalInstance.close();

                },
    function(response){

        var status=response.status;
                alert(status);
                logged=false;});
};

this is clearly a little login app. My problem is that when i start the app and the text area is all ready filled with a user and a password saved before, if i press login, the post request send empty params.
Strangely if i delete a letter from the two params and i rewrite it everything goes ok, any idea why?

Answer 1

I think your main issue is that your bindings are not to your data object. Change ng-model="username" to ng-model="data.username", and do the same for password. That should make everything bound up correctly for login.