Angular JS: ng-disabled not disabling button after submit - angularjs

Question

I have a form like below-
<form class="form-horizontal register-form" name="register" ng-submit="registerUser();" novalidate>
<div class="form-group">
<label for="email" class="cols-sm-2 control-label">Your Email</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<input type="email" class="form-control" ng-model="user.email" name="email" id="mail" placeholder="Enter your Email" required />
<i ng-show="register.email.$dirty && register.email.$invalid && !user.submit" class="error-icon glyphicon glyphicon-remove"></i>
<i ng-show="register.email.$valid" class="valid-icon glyphicon glyphicon-ok"></i>
</div>
<span class="error" ng-show="register.email.$dirty && !user.submit && register.email.$invalid">Email field is required.</span>
<span class="error" ng-show="register.email.$dirty && register.email.$error.email && register.email.$invalid">Email you entered is invalid.</span>
</div>
<div class="form-group">
<label for="password" class="cols-sm-2 control-label">Password</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
<input type="password" class="form-control" ng-model="user.login_password" name="login_password" id="login_password" placeholder="Enter your Password" required />
<i ng-show="register.login_password.$dirty && register.login_password.$invalid && !user.submit" class="error-icon glyphicon glyphicon-remove" ></i>
<i ng-show="register.login_password.$valid" class="valid-icon glyphicon glyphicon-ok"></i>
</div>
<span class="error" ng-show="register.login_password.$dirty && register.login_password.$error.required && !user.submit">Password field is required.</span>
</div>
<div class="form-group">
<label for="confirm" class="cols-sm-2 control-label">Confirm Password</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
<input type="password" ng-model="user.confirm_password" class="form-control" name="confirm_password" id="confirm_password" placeholder="Confirm your Password" required />
<i ng-show="user.login_password !== user.confirm_password" class="error-icon glyphicon glyphicon-remove"></i>
<i ng-show="register.confirm_password.$valid && user.login_password == user.confirm_password" class="valid-icon glyphicon glyphicon-ok"></i>
</div>
<span class="error" ng-show="register.confirm_password.$dirty && register.confirm_password.$error.required && !user.submit">Confirm password field is required.</span>
<span class="error" ng-show="register.confirm_password.$dirty && user.login_password !== user.confirm_password">Confirm password does not match.</span>
</div>
<div class="form-group ">
{{register.$invalid }} {{ disableButton}} {{register.$invalid == disableButton}}
<button type="submit" class="btn btn-primary login-button" ng-disabled="register.$invalid" id="button-register" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Registering..."><i class="fa fa-key" aria-hidden="true"></i> Register</button>
</div>
</form>
Here is my conroller-
$scope.registerUser = function() {
$scope.user.created_at = Math.round((new Date()).getTime() / 1000);
$scope.user.updated_at = Math.round((new Date()).getTime() / 1000);
$scope.user.action = 'add';
$("#button-register").button('loading');
$http({
method: 'POST',
url: 'api/user.php/users/',
data: $scope.user ,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data, status, headers, config) {
$("#button-register").button('reset');
$scope.successMsg = 'Congratulation! you are registered successfully.';
$scope.user={};
$scope.user.submit=true;
$scope.disableButton=true;
})
} // End of register function
Everything works fine, but once I submit the form and clear the input fields the submit button is enabled. I tried to print the value of {{register.$invalid }} after submit which is true(ideally if it is true button should be disabled). but still the button is enabled. Can someone point me where I am doing wrong?

Answer 1

I think it has something do with this line :
$("#button-register").button('reset');
Maybe ,it's changing the submit into a whole new button with type reset.And so there is ng-disabled tag after the execution that statement.Try removing this statement and to see if the disable works without it.
Also its a jquery,which can always create a problem when it comes to combining it with angularjs.If that is the case try putting it in
$scope.$apply(function(){
$("#button-register").button('reset');
}