Angular JS Ng-Show / Ng-Hide

Question

I am writing an angular service for a login form. I have written a factory (and used an http injector) that takes care of submitting the digest HTTP credentials to the rest service. My Authentication is working but the problem I am having has to do with an error message that I would like to display if incorrect credentials are supplied.

I included a div with and ng-show value of errorAlertTextElem. When the $resolved status for resource factory is false I want to show the ng-show errorAlertTextElem element. Right now this works but only for a moment. When I type in incorrect credentials and click sign in the error messages displays for a second and then goes away. I have been trying to figure out why this is. I wondered if I needed to use $scope.$apply() but since digest is already in progress this does not work. What am I missing here?

Angular Controller code:

//angular.js controller code portion
loriaGameControllers.controller('signinController', ['$scope',   'Users',function($scope,Users){



$scope.signin = function()

    {

            //Users is a factory that makes a restful resource call. 
        var test = Users.userInfo().query();//this returns a promise and $resolved

        console.log(test);

        if(test.$resolved == false){

        $scope.errorAlertTextElem = true;//right here is where I attempt to set the ng-show value to true so that the error box will be true. However, the errorAlertTextElem only displays for a second and then goes away.

        }
    };

}]);

html Code Signin Form Code (This is inside my ng-app):

<form class="form-signin col-md-6" role="form" name="signinForm"  ng-controller="signinController">
            <h2 class="form-signin-heading">Sign In</h2>
<!-- The error message I want to show-->

<div class="alert alert-danger" ng-show="errorAlertTextElem">Invalid Username    or Password</div>
            <input type="email" class="form-control" placeholder="Email address" ng-model="username" name="username"required autofocus>

            <input type="password" class="form-control" placeholder="Password" ng-model="password" name="password"required>

            <label class="checkbox">

              <input type="checkbox" value="remember-me"> Remember me

            </label>
    <!--ng-click that triggers the callback-->
            <div class="btn btn-lg btn-primary btn-block" ng-click="signin()">Sign in</div>

          </form>

Answer 1

The angular resource will only reject when an http error happened. That means when an error like '404' or '505' happened the resolve will be false. To make your code work you should handle the resolve response that comes from server to show the message.

test.$promise.resolve(function(response){
     // handle the error come from you server 
     console.log(response);
     // show error msg?

});

Answer 2

I have resolved the issue. There was a location change in an injector I was using. So every time the injector ran, the template was reloaded.