how to open custom drop-down upwards - html

Question

Currently, I'm working on a custom AngularJS drop-down, which is represented by the HTML structure below:
<div>
<label></label>
<div>
<a ng-class="{active: popover}">
<div></div> <!-- the selected item -->
</a>
<div style="position: relative;"> <!-- THIS is the div that presents -->
<!-- the list with the menu items-->
<div class="popover" ng-class="{popover-show}">
<input /> <--! this is a search box -->
<ul ng-repeat="item in items">
</ul>
</div>
</div>
</div>
</div>
The rules for .popover and .popover-show are from Twitter Bootstrap but the have the additional rules below:
.popover{
top: 20px;
left: auto;
right: 0;
max-width: none;
border-collapse: separate;
}
.popover.popover-show {
display : block !important;
}
The div with the postition:relative is the one that is wrap
The directive seems to work fine. However, when it's positioned below the middle of the page and it has too many items so it exceeds the window's height by default the vertical scroll of the bar appears. I've been looking to other similar questions, but none of them was close enough to my case. So, my question is what would be the smartest way to detect when I am about to exceed the window height (and of course, the best place to do it - CSS, the directive) and to set the bottom to 0?
Thanks in advance!
UPDATE: I'm trying to get around without using jQuery and the JS files for Twitter Bootstrap

Answer 1

use the data-placement=" " identifier
this is how to do it for a popover:
HTML
Click
JS
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
For dropdowns this will work, to change from dropping down to dropping up,
HTML
<div class="dropup">
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
</div>