Display Alert according to an Ionic condition

Question

I have a user registration page where I have a code field where I would like to validate it according to a condition ($Scope.error) coming from my controller, I already have some alerts but they validate only the form

Controller:

 if(status === 406){
        $scope.erro = true;
        console.log("Erro");
  }

This is the snippet of the button, followed by the template that displays the errors:

<label class="item item-input" style="margin-left:10px;margin-right:10px;margin-top:8px"
   ng-class="{'has-errors' : usuarioForm.codigo.$invalid, 'no-errors' : usuarioForm.codigo.$valid}">
<input type="text" name="codigo" placeholder="Código" ng-model="usuario.codigo" ng-minlength="3" ng-maxlength="20"
   ng-blur="getUsuario(usuario, $event)" required>
</label>

<div class="error-container" ng-show="usuarioForm.codigo.$error" ng-messages="usuarioForm.codigo.$error">
   <div ng-messages-include="error-list.html"></div>
</div>

Template:

<script id="error-list.html" type="text/ng-template">
   <div class="error" ng-message="required">
   <i class="ion-information-circled"></i>
   ESSE CAMPO É OBRIGATÓRIO
   </div>

   <div class="error" ng-message="erro">
   <i class="ion-information-circled"></i>
   TESTE
   </div>

   <div class="error" ng-message="minlength">
   <i class="ion-information-circled"></i>
   Minimum length of this field is 5 characters!
   </div>
   <div class="error" ng-message="maxlength">
   <i class="ion-information-circled"></i>
   Maximum length of this field is 20 characters!
   </div>
</script>

In short, I want to display a message when the variable $scope.erro for true.

Page example:

Answer 1

I solved the problem as follows:

On the controller:

$scope.showAlert = function(titulo, erroMsg) {
    var alertPopup = $ionicPopup.alert({
      title: titulo,
      template: erroMsg
    });
    alertPopup.then(function(res) {
      console.log('Err');
    });
  };

Then just call the showAlert function and pass the title and error message, e.g.:

var erroMsg = "Código Inválido!";
var titulo = "Erro ao entrar com o código";
$scope.showAlert(titulo, erroMsg);

This example from above shows a pop up with the error, but to put the error under the input I did so:

<form name="usuarioForm" role="form" novalidate="">

<label class="item item-input" style="margin-left:10px;margin-right:10px;margin-top:8px"
ng-class="{'has-errors' : erro, 'no-errors' : !erro}">

<input type="text" name="codigo" placeholder="Código" ng-model="usuario.codigo" ng-minlength="3" ng-maxlength="20"
ng-blur="getUsuario(usuario, $event)" required>
</label>
<div class="error-container" ng-show="erro">
<div class="error">
<i class="ion-information-circled"></i>
CÓDIGO INVÁLIDO
</div>
</div>

<label class="item item-input" style="margin-left:10px;margin-right:10px;margin-top:5px">
<input type="text" placeholder="Nome" ng-model="usuario.nome" ng-required="true">
</label>

<label class="item item-input" style="margin-left:10px;margin-right:10px;margin-top:5px">
<input type="text" placeholder="Login" ng-model="usuario.login" ng-required="true">
</label>

I am showing the invalid code message in case of an error in Controller, that way just pass $scope.erro as true.

Ex:

error(function(response, status) {
    if (status === 406) {
        $scope.erro = true;
        var erroMsg = "Código não encontrado! Tenve novamente";
        var titulo = "Erro ao verificar código";
        $scope.showAlert(titulo, erroMsg);
        console.log("Erro");
    }
});