How to simulate dropdown list with input? - angularjs

Question

I have this part of code :
http://jsfiddle.net/Lt7aP/1015/
What I`m trying to do is when user click on that input or on button next to it I want to expand list but problem is that i cant get list below that input. Any suggestion?
<div class="input-group-btn">
<button type="button" data-toggle="dropdown">
<input class="input-sm-custom bg-light-black white bold fs15" readonly="readonly" style="border:1px solid #1d1d1d;width: 100%;font-weight: bold;" data-ng-model="selectedItem" ng-model-options="{ debounce: 500 }">
</button>
<button type="button" class="bg-light-black dropdown-toggle input-sm-custom mr2 fs14 bt-light-black" data-toggle="dropdown"><span class="carret-arrow white "></span></button>
<ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-list bg-light-black" role="menu" style="width: 100%;font-weight: bold;" ng-repeat="item in OddsRepresentations">
<li class="pointer padding2 fs15" ng-model="selectedItem" >{{item}}</li>
</ul>
</div>
It work like this:
<div class="select-wrapper">
<select class="form-control" data-ng-model="selectedItem" data-ng-options="item as item for item in OddsRepresentations" data-ng-change="changeOddsRepresentation()"></select>
</div>
But i want to make my own dropdown to be same at all browser

Answer 1

I have made few changes in your code to have a working dropdown. First of all I've set a boolean to show or not the list.
This is done by adding ng-click="isOpen = !isOpen" in your button. And then your ul will be like this :
<ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-list bg-light-black" role="menu" style="width: 100%;font-weight: bold;" ng->
<li class="pointer padding2 fs15" ng-if="isOpen" ng-repeat="item in OddsRepresentation" >
<span ng-click="select(item);" ng-bind="item"></span></li>
</ul>
Notice, that there is also an ng-click on your li, it's for save you value and then print it on your input.
Working Fiddle