Datepicker in Angular ui modal not opening - angularjs

Question

I have a datepicker within a form in my modal. The datepicker is not opening no matter what I try. My code is :
//In my parent controller - Called on button click
$scope.openModal = function(indx){
var modalInstance = $modal.open({
animation:true,
templateUrl:'myModal.html',
controller: 'MyModalController'
});
};
//In MyModalController
$scope.open = function(){
$scope.opened = true;
console.log('Opened is : ' + $scope.opened);
};
//Modal view file myModal.html
<input type="text" class="form-control" datepicker-popup="dd.MMMM.yyyy" ng-model="obj.startDate" is-open="$parent.opened" min-date="minDate" max-date="'2015-06-22'" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open(evt)">Close</button>
</span>
This question has been asked before, but the solutions given are not working for me. I have already tried everything suggested here:
ui.bootstrap.datepicker is-open not working in modal
https://github.com/angular-ui/bootstrap/issues/2307

Answer 1

Add $event.preventDefault() and $event.stopPropagation() to your open function in your controller and make sure to pass the $event to the open function in the ng-click:
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
and in your view:
<button type="button" class="btn btn-default" ng-click="open($event)">Close</button>
Run the code snippet to see a working demo:
var app = angular.module('demo', ['ui.bootstrap', 'ngAnimate']);
app.controller('MainCtrl', ['$scope', '$modal', function($scope, $modal){
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl'
});
};
}]);
app.controller('ModalInstanceCtrl', ['$scope', '$modalInstance', function ($scope, $modalInstance) {
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);
#import url("//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css");
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<div ng-app="demo">
<div ng-controller="MainCtrl" class="container">
<button class="btn btn-default" ng-click="open()">Open Modal</button>
</div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Modal with a DatePicker</h3>
</div>
<div class="modal-body">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="shortDate" ng-model="dt" is-open="opened" />
<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>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="cancel()">Cancel</button>
</div>
</script>
</div>