AngularJS new value does not reach the directive

I have the following directive that mounts a modal. Arquivo: 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');
                    };
                });
            }
        };
    }]);

})();

And the following controller. Arquivo: home.crotroller.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;
        };

    }]);

})();

And in my view I call the function showLogin()

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

This function changes the value $scope.loggingIn to true , except that this value is not arriving until directive. Only the first status (when loading the screen) arrives which is false