Angular UI dropdown z-index in modal - angularjs

Question

In this plunk I have an Angular UI modal with a dropdown. The dropdown has the uib-dropdown dropdown-append-to-body directives to show the complete list even though it's in a div with overflow:hidden.
If you click on the button, you will see that the dropdown list is behind the modal. How to fix the z-index?
HTML
<button ng-click="openModal()">Open modal</button>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h4 class="modal-title">The Title</h4>
</div>
<div style="background-color:orange;overflow-y:hidden;height:30px">
<div class="btn-group" uib-dropdown dropdown-append-to-body>
<button id="btn-append-to-body" type="button" class="btn btn-primary" uib-dropdown-toggle="">
Dropdown on Body <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu="" role="menu" aria-labelledby="btn-append-to-body">
<li role="menuitem">
Action
</li>
<li role="menuitem">
Another action
</li>
<li role="menuitem">
Something else here
</li>
<li class="divider"></li>
<li role="menuitem">
Separated link
</li>
</ul>
</div>
</div>
</script>
Javascript
var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctl', function ($scope,$uibModal) {
$scope.openModal = function() {
$scope.modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
scope: $scope
});
};
});

Answer 1

Add this class to your CSS file
.dropdown-menu.model-top{
z-index:39999;
}
HTML
<ul class="dropdown-menu model-top" uib-dropdown-menu="" role="menu" aria-labelledby="btn-append-to-body"></ul>
NB: inline CSS not work, the are replacing the style attribute with their own styles, like position, height

Answer 2

use z-index like this:
<div class="btn-group" uib-dropdown dropdown-append-to-body>
<button id="btn-append-to-body" type="button"
class="btn btn-primary" uib-dropdown-toggle>
Dropdown on Body <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu"
aria-labelledby="btn-append-to-body"
style="z-index:39999">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>