z-index not working in Angular UI Datepicker

Question

In this plunk I have an Angular UI Datepicker inside a div (the div has orange background). The problem is that the Datepicker is truncated, even though I set z-index: 99999. If I remove from the div overflow-y:auto the Datepicker is shown, however I need the div to scroll when there's an overflow. How to fix this problem?

HTML:

<div style="height:200px;padding:30px;background-color:orange;overflow-y:auto">
  <p class="input-group" style="z-index:99999">
      <input type="text" class="form-control" ng-model="dt" is-open="config.opened"
          uib-datepicker-popup popup-placement="top-left" datepicker-options="dateOptions" 
           ng-required="true" close-text="Close" />
      <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open1()">
          <i class="glyphicon glyphicon-calendar"></i></button>
      </span>
  </p>
</div>

Javascript:

var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctl', function ($scope) {

    $scope.opened = false;

    $scope.dateOptions = {
       showWeeks: false
    };

    $scope.open1 = function(){
        $scope.opened = true;
      };


});

app.directive('dir2', function () {
    return {
        restrict: 'EA',          
        scope: {
          someVar: '='
        },
        templateUrl: 'dir2.html',
        link: function (scope, element, attrs) { 

           scope.config = {};
           scope.config.opened = true;

        }
    }
});

Answer 1

This is very common case with tooltip, datepicker or popover in such cases it is better choice to append the content to body so the current element styling doesn't matter. Basically in this case you could append datepicker to body by setting below datepikcer-append-to-body to true.

datepicker-append-to-body="true"

Don't go for setting z-index, it may work by tweaking few things, but it could unintentionally break other piece of software.

Plunker Demo