UIKit dropdown with div inside
HTML
<script src="http://www.getuikit.com/dist/js/uikit.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<link rel="stylesheet" href="http://www.getuikit.com/dist/css/uikit.css">
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div class="uk-form-row uk-width-1-1" data-ng-repeat="items in inputList.getinputList">
<input ng-model='item.value' type="text" placeholder="Choose"/>
<!-- WORKS OK -->
<div class="uk-parent" data-uk-dropdown="{mode:'click'}">
<a href="">Nav item - Works OK</a>
<div class="uk-dropdown uk-dropdown-navbar" style="top:50px">
<table>
<thead>
<tr>
<th>First Value</th>
<th>Second Value</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="item in numberList.getList | filter:item.value" ng-click="setSelected(item)">
<td>{{item.first}}</td>
<td>{{item.last}}</td>
</tr>
<tr ng-show="(numberList.getList | filter:item.value).length == 0">
<td>Nothing here!</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS
.menu-item:hover{
background: #666;
cursor: pointer;
}
JavaScript
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.item={}
$scope.numberList={}
$scope.numberList.getList=[{'first':'Jon','last':'skeet'},{'first':'naeem','last':'shaikh'},{'first':'end','last':'game'}]
$scope.inputList={}
$scope.inputList.getinputList=[{'firstA':'AAA','lastB':'BBBB'}]
$scope.idSelectedVote = null;
$scope.setSelected = function (idSelectedVote) {
$scope.idSelectedVote = idSelectedVote;
$scope.item.value=idSelectedVote.first+' '+idSelectedVote.last;
//alert(idSelectedVote);
};
}