Why doesn't the value of the model change?

Question

Angular

<div class="panel panel-primary" ng-controller="modal">
    <div class="panel-heading">Modal window</div>
    <div class="panel-body">
        <button ng-click="toggleModal()" class="btn btn-default">Open modal</button>
    </div>
    <modal title="Click close icon" visible="showModal">
        <input type="text" ng-model="cityName"><br><br>
        <button ng-click="tryCloseModal()" class="btn btn-default">Change and exit</button>
    </modal>
</div>


Directive:
<code lang="javascript">
angular.module('app').directive('modal', function () {
    return {
        template: '<div class="modal fade"  data-backdrop="static">' +
        '<div class="modal-dialog">' +
        '<div class="modal-content">' +
        '<div class="modal-header">' +
        '<h4 class="modal-title">{{ title }}</h4>' +
        '</div>' +
        '<div class="modal-body" ng-transclude></div>' +
        '</div>' +
        '</div>' +
        '</div>',
        restrict: 'E',
        transclude: true,
        replace:true,
        scope:true,
        link: function postLink(scope, element, attrs) {
            scope.title = attrs.title;

            scope.$watch(attrs.visible, function(value){
                if(value == true)
                    $(element).modal('show');
                else
                    $(element).modal('hide');
            });

            $(element).on('shown.bs.modal', function(){
                scope.$apply(function(){
                    scope.$parent[attrs.visible] = true;
                });
            });

            $(element).on('hidden.bs.modal', function(){
                scope.$apply(function(){
                    scope.$parent[attrs.visible] = false;
                });
            });
        }
    };
});
</div>
</code>

Изменение значения в поле <code lang="html">
<input type="text" ng-model="cityName"><br><br>
</code> никак не влияет на модель, но значение в поле отображается