Position Angular UI Datepicker Outside Scrollbar

Question

I have a datepicker inside a scroll container. Problem is that when it appears it is confined within the scrollbar and messes up the height of the scrollbar, I want the popup to appear outside/in-front of the scroll nice and smooth, so causing no height issues.

See this fiddle

<div ng-controller="DatepickerDemoCtrl">
<div class="row">
    <div class="col-md-6">
        <div class="input-group">
          <input
            type="text"
            id="popup"
            class="form-control"
            datepicker-popup=""
            ng-model="today"
            is-open="opened"
            min-date="minDate"
            max-date="'2015-06-22'"
            ng-click="open()"/>
          <span class="input-group-btn">
            <label for="popup" class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i></label>
          </span>
        </div>
    </div>
</div>
<pre>Selected date is: <em>{{today}}</em></pre>

body {padding:20px}
.col-md-6{
    overflow:scroll;
    height:200px;
    background:red;
    }
.input-group{
    background:green;
    height:300px;
}

Answer 1

Change the appendToBody to true.

.constant('datepickerPopupConfig', {
  datepickerPopup: "MMM d, yyyy",
  closeOnDateSelection: true,
  appendToBody: fasle,
  showButtonBar: false
})