ng-show attribut causes html block blinking (beginner) - angularjs

Question

On my login page, when I enter wrong credentials (login/pass), an error message is displayed in red.
In login.html :
<div class="alert alert-danger" ng-show="authenticationError"
translate="login.messages.error.authentication">
<strong></strong>
</div>
If I set ng-show="true" explicitely, The message is persistent on the screen ; (fortunately).
The problem comes when ng-show is dynamic (with authenticationError variable)
When this variable is set to true, then the error message appears but left 1 second on the screen and then disappear.
Behind the scene (controller + service) :
login.controller.js :
$scope.login = function () {
// event.preventDefault();
Auth.login({
username: $scope.username,
password: $scope.password,
rememberMe: $scope.rememberMe
}).then(function () {
$scope.authenticationError = false;
// if()
if ($rootScope.previousStateName === 'register') {
$state.go('home');
} else {
$rootScope.back();
}
}).catch(function () {
$scope.authenticationError = true;
});
};
auth.service.js :
angular.module('tessicommunicationApp')
.factory('Auth', function Auth($rootScope, $state, $q, $translate, Principal, AuthServerProvider, Account, Register, Activate, Password, PasswordResetInit, PasswordResetFinish) {
return {
login: function (credentials, callback) {
var cb = callback || angular.noop;
var deferred = $q.defer();
console.log("login ...");
AuthServerProvider.login(credentials).then(function (data) {
// retrieve the logged account information
Principal.identity(true).then(function(account) {
// After the login the language will be changed to
// the language selected by the user during his registration
$translate.use(account.langKey).then(function(){
$translate.refresh();
});
deferred.resolve(data);
});
return cb();
}).catch(function (err) {
this.logout();
deferred.reject(err);
console.log("erreur login !");
return cb(err);
}.bind(this));
return deferred.promise;
},
auth.session.service.js :
angular
.module('tessicommunicationApp')
.factory(
'AuthServerProvider',
function loginService($http, localStorageService, $window, $state, $cookies) {
return {
login : function(credentials) {
var data = 'j_username='
+ encodeURIComponent(credentials.username)
+ '&j_password='
+ encodeURIComponent(credentials.password)
+ '&remember-me=' + credentials.rememberMe
+ '&submit=Login';
return $http
.post(
'api/authentication',
data,
{
headers : {
'Content-Type' : 'application/x-www-form-urlencoded'
}
}).success(function(response) {
return response;
});
},
Tell me if you need more code.
The context is :
1) I need to debug this ticket.
2) I didn't code anything of this web application (especially front-end part)
3) I almost have NO knowledges in AngularJS (just theory a little).
I wish you will help me to solve my first ticket :).*

Answer 1

Aren't you missing a parenthesis and extra parenthesis at the end of the statement here:
}).catch(function (err) {
this.logout();
deferred.reject(err);
console.log("erreur login !");
return cb(err);
}.bind(this));// <-- missing parenthesis
It should be like:
}).catch(function (err) {
this.logout();
deferred.reject(err);
console.log("erreur login !");
return cb(err);
}).bind(this);
Something else you can try when suspect about changes occurring without you know is monitoring the variable change with a $watch like:
$scope.countChange = 0;
$scope.$watch('authenticationError', function(newValue, oldValue) {
$scope.countChange = $scope.countChange + 1;
console.log('Change count :',$scope.countChange , ' New Value =', newValue );
});