Angular UI Bootstrap datepicker in modal only working on first click

Question

The date picker seems to be only working on the first click and then after that it won't pop up. I am guessing it has something to do with some crossed variable or function definitions, but I can't figure out how to fix it.

Here is the code: http://plnkr.co/edit/ridTspMBHE1iphrSobQr?p=preview

HTML

<div ng-controller="ModalDemoCtrl">
    <button class="btn btn-info" ng-click="open_modal()">Edit</button>

    <script type="text/ng-template" id="notificationInput.html">
        <div class="modal-header">
            <h3 class="modal-title">My Modal</h3>
        </div>
        <div class="modal-body">
            <form role="form">
                <div class="form-group">
                    <label for="n_title">Title</label>
                    <input type="text" class="form-control" id="n_title" value="{{selectedNotification.title}}">
                </div>

                <div class="form-group">
                    <label for="n_release">Release</label>
                    <p class="input-group">
                        <input type="text" id="n_release" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                        </span>
                    </p>
                </div>
            </form>

        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>
</div>

Javascript

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal) {

  $scope.open_modal = function(notification) {

        $scope.selectedNotification = notification;
        var modalInstance = $modal.open({
            templateUrl: 'notificationInput.html',
            controller: ModalInstanceCtrl,
            scope: $scope
        });
    };
};

var ModalInstanceCtrl = function ($scope, $modalInstance) {

    $scope.ok = function () {
        $modalInstance.close();
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };

    $scope.today = function() {
        $scope.dt = new Date();
    };
    $scope.today();

    $scope.clear = function () {
        $scope.dt = null;
    };

    // Disable weekend selection
    $scope.disabled = function(date, mode) {
        return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
    };

    $scope.toggleMin = function() {
        $scope.minDate = $scope.minDate ? null : new Date();
    };
    $scope.toggleMin();

    $scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();

        $scope.opened = true;
    };

    $scope.dateOptions = {
        formatYear: 'yy',
        startingDay: 1
    };

    $scope.initDate = new Date('2016-15-20');
    $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
    $scope.format = $scope.formats[0];

};

Answer 1

As you are using it inside modal there is scope issue. You just need to use $parent.opened instead opened.

Modified HTML

<input type="text" id="n_release" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="$parent.opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />

Working DEMO