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