AngularJS conditional required - angularjs

Question

I want to validate a form if an input text has value, or another one, or both of them.
For example
<!-- if username has data -->
<div class="username">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required
minlength="4" maxlength="8"
placeholder="4 to 8 characters long" />
</div>
<!-- if nickname has data -->
<div class="nickname">
<label for="nickname">Nickname:</label>
<input type="text" id="nickname" name="nickname" required
minlength="4" maxlength="8"
placeholder="4 to 8 characters long" />
</div>
<!-- or if both has data submit is enabled -->
<input type="submit" value="Submit">
-- EDIT --
Ok now I have something weird, it seems that the "&&" operator doesn't work in HTML, so I'm a bit stuck..
Actually, with your help, my button can be clicked if the condition is verified. But strangely :
- Button is not disabled
- If the condition is not verified, my button doesn't display my ng-if message.
HTML
<form class="form-horizontal" role="form" name="myForm" novalidate>
<div class="card-body card-padding">
<div class="form-group">
<div class="container-fluid">
<div class="row">
<label class="col-sm-2 control-label">Firstname</label>
<div class="col-sm-8">
<tags-input ng-model="myForm.firstname"
min-length="0"
name="firstname"
use-strings="true" class="form-control" required>
</tags-input>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="container-fluid">
<div class="row">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-8">
<tags-input ng-model="myForm.name"
min-length="0"
name="name"
use-strings="true" class="form-control" required>
</tags-input>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="container-fluid">
<div class="row">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-8">
<tags-input ng-model="myForm.email"
min-length="0"
name="email"
use-strings="true" class="form-control" required>
</tags-input>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="container-fluid">
<div class="row">
<label class="col-sm-2 control-label">Username</label>
<div class="col-sm-8">
<tags-input ng-model="myForm.username"
min-length="0"
name="username"
use-strings="true" class="form-control" required>
</tags-input>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="container-fluid">
<div class="row">
<label class="col-sm-2 control-label">Nickname</label>
<div class="col-sm-8">
<tags-input ng-model="myForm.nickname"
min-length="0"
name="nickname"
use-strings="true" class="form-control" required>
</tags-input>
</div>
</div>
</div>
</div>
<div class="form-group" data-ng-show="btnOk">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" data-ng-click="action()" class="btn btn-success btn-sm"
ng-disabled="(!myForm.username.$valid || !myForm.nickname.$valid) && !myForm.email.$valid && !myForm.name.$valid && !myForm.firstname.$valid">
<span ng-if="(!myForm.username.$valid || !myForm.nickname.$valid) && !myForm.email.$valid && !myForm.name.$valid && !myForm.firstname.$valid">Some required fields are missing</span>
<span ng-if="(myForm.username.$valid || myForm.nickname.$valid) && myForm.email.$valid && myForm.name.$valid && myForm.firstname.$valid">{{button}}</span>
</button>
</div>
</div>
</div>
</form>
How can I bypass this behavior ?

Answer 1

An option is to
Enclose them inside a form (give it a name)
Declare an ng-model for username and nickname inputs
Put the conditionals using the $valid/$invalid options of the objects created by AngularJS for the form components:
See below working example:
angular.module('app', []).controller('ctrl', function() {});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="mForm" ng-app="app" ng-controller="ctrl as vm" novalidate>
<!-- if username has data -->
<div class="username">
<label for="username">Username:</label>
<input type="text" ng-model="vm.username" id="username" name="username" required minlength="4" maxlength="8" placeholder="4 to 8 characters long" />
</div>
<!-- if nickname has data -->
<div class="nickname">
<label for="nickname">Username:</label>
<input type="text" ng-model="vm.nickname" id="nickname" name="nickname" required minlength="4" maxlength="8" placeholder="4 to 8 characters long" />
</div>
<!-- or if both has data submit is enabled -->
<input type="submit" value="Submit" ng-disabled="mForm.username.$invalid && mForm.nickname.$invalid">
<div>Valid: {{!!(mForm.username.$valid || mForm.nickname.$valid)}}</div>
<form>

Answer 2

Resolved this by adding bool in my condition like:
<div class="col-sm-offset-2 col-sm-10">
<button type="button" data-ng-click="action()" class="btn btn-success btn-sm"
ng-disabled="(myForm.firstname.$valid == false || myForm.name.$valid == false || myForm.email.$valid == false || (myForm.username.$valid == false && myForm.nickname.$valid == false))">
<span ng-if="(myForm.firstname.$valid == false || myForm.name.$valid == false || myForm.email.$valid == false || (myForm.username.$valid == false && myForm.nickname.$valid == false))">Some required fields are missing</span>
<span ng-if="(myForm.firstname.$valid && myForm.name.$valid && myForm.email.$valid && (myForm.username.$valid || myForm.nickname.$valid))">{{button}}</span>
</button>
</div>