Multiple required inputs in ng Messages [Angular] - angularjs

Question

I recently have a problem with ng message in angular. I tried to use it as validator however noticed that something don't work the way I want. I want the ctrl.login() function run when the user provide both password and username. Unfortunately right now it is enough to provide just one of this to and the function will trigger. How can I fix this?
<form name="authorizationForm" novalidate="" ng-submit="ctrl.login()">
<div class="list list-inset">
<div class="item item-input" ng-class="{ 'has-errors' : authorizationForm.username.$invalid && authorizationForm.$submitted }">
<input type="text" name="username" placeholder="Username" ng-model="ctrl.data.username" required>
</div>
<div ng-show="authorizationForm.username.$error && authorizationForm.$submitted" ng-messages="authorizationForm.username.$error" ng-messages-include="error-list.html"></div>
<div class="item item-input" ng-class="{ 'has-errors' : authorizationForm.password.$invalid && authorizationForm.$submitted }" >
<input type="password" name="password" placeholder="Password" ng-model="ctrl.data.password" required>
</div>
<div ng-show="authorizationForm.password.$error && authorizationForm.$submitted" ng-messages="authorizationForm.password.$error" ng-messages-include="error-list.html">
</div>
</div>
<div ng-show="loginFailed" class="error-wrongCredentials"><i class="icon ion-close-circled"></i>USERNAME OR PASSWORD IS INCORRECT</div>
<button class="button button-full button-calm button-login" data-ng-disabled="authorizationForm.password.$invalid && authorizationForm.username.$invalid" type="submit">Sign In</button>
</form>
<script id="error-list.html" type="text/ng-template">
<div class="error" ng-message="required">
This field is required
</div>
</script>
EDIT: For clarification. Thx for pointing out the button disable feature but it is not the point of my question. The issue is that the ctrl.login function will be triggered (in other words the form will be submited) despite only 1 out of 2 required input have been filled. I expect that the ngMessage will make it impossible to submit the form if username OR password will be empty. The disable feature on the submit button is just a quick hotfix that i want to remove in the future.
<form name="authorizationForm" novalidate="" ng-submit="ctrl.login()">
<div class="list list-inset">
<div class="item item-input" ng-class="{ 'has-errors' : authorizationForm.username.$invalid && authorizationForm.$submitted }">
<input type="text" name="username" placeholder="Username" ng-model="ctrl.data.username" required>
</div>
<div ng-show="authorizationForm.username.$error && authorizationForm.$submitted" ng-messages="authorizationForm.username.$error" ng-messages-include="error-list.html"></div>
<div class="item item-input" ng-class="{ 'has-errors' : authorizationForm.password.$invalid && authorizationForm.$submitted }" >
<input type="password" name="password" placeholder="Password" ng-model="ctrl.data.password" required>
</div>
<div ng-show="authorizationForm.password.$error && authorizationForm.$submitted" ng-messages="authorizationForm.password.$error" ng-messages-include="error-list.html">
</div>
</div>
<div ng-show="loginFailed" class="error-wrongCredentials"><i class="icon ion-close-circled"></i>USERNAME OR PASSWORD IS INCORRECT</div>
<button class="button button-full button-calm button-login" type="submit">Sign In</button>
</form>
<script id="error-list.html" type="text/ng-template">
<div class="error" ng-message="required">
This field is required
</div>
</script>
EDIT2: Just if case anyone is wondering. I solved the problem. Thx for help and contribution :)

Answer 1

You just need to replace && to || in :
data-ng-disabled="authorizationForm.password.$invalid && authorizationForm.username.$invalid"

Answer 2

You should change the data-ng-disabled condition to 'authorizationForm.password.$invalid || authorizationForm.username.$invalid'. Right now as long as one of the two is valid (but not necessarily both), the user can click submit.