Angular ng show is not updated while scope

Question

I configure <button>which should open the chat window.

in the chat window is ng-showdepending on scope.openChatwhich is launched false. When I clicked the button, I update scope.openChat to true and use $scope.apply. The scope has been updated, but ng-showdoes nothing.

here is the html

<div ng-controller="MessagesCtrl">
    <button start-chat>Send Messages</button>
</div>

and

<div ng-show="openChat" ng-controller="MessagesCtrl">
    <div>CHAT WINDOW
    </div>
</div>

here is the controller:

app.controller("MessagesCtrl", function MessagesCtrl($scope,Auth) {
    $scope.openChat = false;
    $scope.message = { recipient : undefined, sender: undefined, text:'text'};
});

Here is the directive for the button:

'use strict';
app.directive('startChat',[ 'Post', 'Auth', function (Post, Auth) {
    return {
        restrict: 'A',
        replace: true,
        bindToController: true,
        controller: 'MessagesCtrl',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                scope.$apply(function() {
                    scope.openChat = true;
                    scope.message.recipient = scope.profile.$id;
                    scope.message.sender = Auth.resolveUser().uid;
                });
            });
        }
    }
}]);

Thank you

Answer 1

MessagesCtrl. , . , MessagesCtrl . , $scope $apply

, .on() .bind() . jQuery docs

JSFiddle Link

<div ng-app="app">
    <div ng-controller="MessagesCtrl">
        <button start-chat>Send Messages</button>
        <div class="chatWindow" ng-show="openChat"></div>
    </div>
</div>

app.directive('startChat', [function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('click', function() {
                scope.$apply(function() {
                    scope.openChat = true;
                });
             });
        }
    }
}]);

app.controller('MessagesCtrl', ['$scope', function($scope) {
    $scope.openChat = false;
    $scope.message = { recipient : undefined, sender: undefined, text:'text'};
}]);