Angular UI Bootstrap datepicker in modal only working on first click - angularjs

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

Answer 2

This has worked for me:
In html replace is-open="opened" by is-open="field.opened"
and the same in the controller, replace
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
by
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.field.opened = true;
};