Angle NG-шоу работает только когда я вернусь к окну

Question

На главной странице входа в мое угловое приложение я пытаюсь отобразить сообщение об ошибке, когда пользователь пытается ввести недопустимую комбинацию имени пользователя и пароля. По какой-то причине сообщение об ошибке ng-show будет отображаться только в том случае, если я на мгновение откажусь от открытой страницы в браузере, а затем вернусь. Например, если я нажму на submit с неверной парой имя пользователя / пароль, ничего не произойдет, пока я не переключусь на sublime(или любую другую открытую программу), а затем переключусь обратно. Я подозреваю, что проблема заключается в контроллере входа, но я не уверен. Я хотел бы, чтобы сообщение сразу отображалось при неудачной отправке формы авторизации. Я очень озадачен этой ошибкой, и любая помощь будет принята с благодарностью.

Пожалуйста, смотрите соответствующий код ниже:

login.controller.js

(function() {
    'use strict';

    angular
        .module('app.login')
        .controller('LoginFormController', LoginFormController);

    LoginFormController.$inject = [ 'envService', '$http', '$state', 'ngParse', 'toaster', '$rootScope','AclService'];
    function LoginFormController( envService, $http, $state, ngParse, toaster, $rootScope, AclService) {
        var vm = this;

        activate();

        ////////////////

        function activate() {

          // bind all data from the form
          vm.account = {};
          vm.authMsg = '';
          vm.login = function() {
            vm.authMsg= '';
            AclService.flushRoles();


              ngParse.User.logIn(vm.account.email,vm.account.password, {

                      success: function(user) {
                        var resp = new ngParse.Query(ngParse.Role).equalTo("users", ngParse.User.current()).find().then(function(results){
                          if(results.length > 1){
                            results.forEach(function(el){
                              AclService.attachRole(el.attributes.name);
                            })
                          }else{
                            AclService.attachRole(results[0].attributes.name)
                          }

                        // After the role has been attached to user, THEN go to the next state
                        })
                        .then(function(){
                          // console.log("EMAIL:", vm.account.email);
                          // console.log("Pass:", vm.account.password);
                        $state.go('appNoSidebar.home');
                        })
                      },
                      error: function() {

                        vm.authMsg = 'Incorrect credentials. Please try again!';
                      }

              });
          }; //end login
        } // end activate
    } // end controller
})();

login.jade

.block-center.mt-xl.wd-xl
  // START panel
  .panel.panel-dark.panel-flat
    .panel-heading.text-center
      a(href="#")
        img.block-center.img-rounded(src='app/img/carePortalLogo.png', alt='Image')
    .panel-body
      p.text-center.pv SIGN IN TO CONTINUE.
      form(role='form', ng-submit="login.login()", name='login.loginForm', novalidate='').mb-lg
        .form-group.has-feedback
          input#exampleInputEmail1.form-control(type='email', name="account_email" placeholder='Enter email', ng-model="login.account.email", required='')
          span.fa.fa-envelope.form-control-feedback.text-muted.loginIcon
          span.text-danger(ng-show="login.loginForm.account_email.$dirty && login.loginForm.account_email.$error.required") This field is required
          span.text-danger(ng-show="login.loginForm.account_email.$dirty && login.loginForm.account_email.$error.email") This field must be a valid email address
        .form-group.has-feedback
          input#exampleInputPassword1.form-control(type='password', name="account_password" placeholder='Password', ng-model="login.account.password", required='')
          span.fa.fa-lock.form-control-feedback.text-muted.loginIcon
          span.text-danger(ng-show="login.loginForm.account_password.$dirty && login.loginForm.account_password.$error.required") This field is required


        button.btn.btn-block.btn-primary.mt-lg(type='submit') Login

      .alert.alert-danger.text-center(ng-show='login.authMsg') {{login.authMsg}}
  // END panel

маршрут

.state('appNoSidebar.login', {
        url: '/login',
        templateUrl: helper.basepath('login.html'),
        resolve: helper.resolveFor('modernizr', 'icons', 'toaster'),
        controller: 'LoginFormController',
        controllerAs: 'login'
      })

Answer 1

Я решил эту проблему, поместив vm.authMsg в $scope.apply, чтобы связать vm.authMsg с областью видимости так:

$scope.$apply(function(){
  vm.authMsg = 'Access Denied';
});