angular ng-show only works when i navigate back to window

Question

On the main login page of my angular app I am trying to display an error message when a user tries to input an invalid username/password combination. For some reason, the ng-show error message will only show if I momentarily navigate away from the open page in the browser and then come back. For example if I hit submit with an invalid username/password pair nothing will happen until I switch to sublime(or any other open program) and then switch back. I suspect the problem lies in the login controller but I am not sure. I would like the message to display immediately on an unsuccessful submit of the login form. I'm pretty stumped by this bug and any help would be greatly appreciated.

Please see the relevant code below:

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

route

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

Answer 1

I solved this problem by wrapping vm.authMsg in $scope.apply in order to bind vm.authMsg to scope like so:

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