Login Firebase only works by double-clicking the ng-click button

Question

I am making a login page with the email and password fields and a button that calls the following function:

$scope.login = function(usuario){

$scope.isLoading = true;
firebase.auth().signInWithEmailAndPassword(usuario.email, usuario.senha).catch(function(error) {
  var errorCode = error.code;

  if(errorCode === 'auth/argument-error'){
    errorMessage = 'Digite e-mail e/ou senha.';

  }else if (errorCode === 'auth/wrong-password') {
    errorMessage ='A senha é inválida';

  } else if(errorCode ==='auth/invalid-email'){
    errorMessage ='Email inválido';

  }else if (errorCode === 'auth/user-not-found') {
    errorMessage ='Usuário não cadastro';

  }else if (errorCode === 'auth/too-many-requests') {
    errorMessage = error.message;
  }
  $scope.showAlert(errorMessage);
  $scope.isLoading = false;
});

var usuario = firebase.auth().currentUser;
if(usuario != null){
  firebase.database().ref('usuarios/'+ usuario.uid).set({
    nome : usuario.displayName,
    email : usuario.email,
    foto : usuario.photoURL,
    uid : usuario.uid,
  });

  $location.path("/home");
}
$scope.isLoading = false;};

The problem happens when I fill in the data correctly, that is, it is validated in Firebase and I click the login button. When I click once it gets "processing", if I click twice it validates and enters the application.

Follow login screen:

<div layout="row" layout-fill id="login" data-ng-init="init()">
  <section layout="column" flex layout-align="center center" class="login">
   <md-card class="md-whiteframe-24dp">
  <md-toolbar>
    <img ng-src="{{imagem}}" class="md-card-image" alt="Washed Out">
    <div layout="column" layout-padding layout-align="center center">
    <div class="md-headline ">Login</div>
  </div>
</md-toolbar>
<md-card-content>
  <form name="loginForm" >
    <md-input-container class="md-block">
      <label for="email">Email</label>
      <input type="email" name="email" ng-model="usuario.email" required />
      <div ng-messages="loginForm.email.$error">
        <div ng-message="required">E-mail obrigatório</div>
      </div>
    </md-input-container>
    <md-input-container class="md-block">
      <label for="password">Senha</label>
      <input type="password" name="password" ng-model="usuario.senha" required />
      <div ng-messages="loginForm.email.$error">
        <div ng-message="required">Senha obrigatória</div>
      </div>
    </md-input-container>
    <md-input-container class="md-block">
      <div layout="row" layout-align="center center">
        <md-button class="md-raised md-primary" ng-disabled="loginForm.$invalid" flex="50" ng-click="login(usuario)">Log in</md-button>
      </div>
    </md-input-container>
  </form>
</md-card-content>

Answer 1

In fact, it’s the $Copes that won’t go from first, for that, use:

 $scope.$apply();