javascript - AngularJS新值没有到达指令

Question

我有以下指令骑着模态。File: login.component.js

(function() {
    'use strict';

    var app = angular.module('myapp');

    app.directive('loginComponent', ['loginService', function(loginService){
        return {
            templateUrl: 'app/components/login/login.html',
            restrict: 'E',
            replace: true,
            controller: 'homeCrotroller',
            link: function ($scope) {
                $scope.submit = function() {
                    $scope.login();
                    $("#modal-login").modal('hide');
                };

                $scope.cancel = function() {
                    $scope.loggingIn = false;
                    $("#modal-login").modal('hide');
                };

                $scope.$watch('loggingIn', function() {                    
                    if ($scope.loggingIn) {
                        $("#modal-login").modal('show');
                    };
                });
            }
        };
    }]);

})();

和下一个控制器。File: home.controller.js

(function() {
    'use strict';

    var app = angular.module('myapp');

    app.controller('homeCrotroller', ['$scope', function($scope){

        $scope.loggedIn = false;
        $scope.loggingIn = false;

        $scope.showLogin = function () {
            $scope.loggingIn = true;
        };

        $scope.logout = function () {
            $scope.user = null;
            $scope.loggedIn = false;
        };

        $scope.login = function () {
            $scope.loggingIn = false;
            $scope.loggedIn = true;
        };

    }]);

})();

在我看来，我打电话给showLogin()

<a class="login" id="btn-login" href="javascript:void(0);" ng-click="showLogin()" title="Entrar">Entrar</a>

此函数将$scope.loggingIn 的值更改为true，仅此值未达到策略。仅到达第一个状态（加载屏幕），即false