AngularJS datepicker inside an accordion

Datepicker not displayed properly inside an accordion Answer on my blog http://vincentaudebert.github.io/

by Vincent Audebert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div ng-controller="YourController">
<accordion close-others="false">
	<accordion-group is-open="status.open" heading="Filter Date">
            <p class="input-group">
                <input id="start-date" datepicker-append-to-body="true" type="text" class="form-control" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" 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>
    </accordion-group>
</accordion>
</div>

JavaScript

angular.module("YourModule", [])
    .controller("YourController", function YourController($scope) {
    
        $scope.status = {
            'open': false
        };
        $scope.opened = false;
        $scope.dt = new Date();
        
    $scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
    
        $scope.opened = true;
    };
});