Angular UI: dropdown does not work with datepicker

Question

I am trying to add Datepicker in the drop down menu as follows and set autoClose = "outsideClick". However, when the button of any month is pressed, it switches the drop-down menu. How to solve this?

HTML code:

<div class="date-wrap pull-right" dropdown auto-close="outsideClick">
                <button class="btn btn-info" dropdown-toggle>Date Picker</button>
                <div class="dropdown-menu  datepicker" role="menu">
                        <datepicker show-weeks="false" ng-model="dt"></datepicker>
                </div>
</div>

Plunker : http://plnkr.co/edit/lBn3Oo?p=preview

Answer 1

You need to manually block the click event from the bubbles, so it never reaches the top node (document), which closes the drop-down menu:

<div class="date-wrap pull-right" dropdown auto-close="outsideClick">
    <button class="btn btn-info" dropdown-toggle>Date Picker</button>
    <div class="dropdown-menu  datepicker" role="menu" ng-click="$event.stopPropagation()">
        <datepicker show-weeks="false" ng-model="dt"></datepicker>
    </div>
</div>

Pay attention to ng-click="$event.stopPropagation()"that does the trick.

: http://plnkr.co/edit/pPwW83Ro0u0g4dVhyZaZ?p=info