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="TestCtrl">      
   <form class="uk-form uk-margin-large">
       <input autocomplete="off"
               data-ng-click="openSearch();"
               style="padding-left: 35px!important;"
               hide-search="hideSearchContainer()"
               data-ng-model="searchText" class="uk-width-1-1" type="search"
               placeholder="Hello">
        <div hide-search="hideSearchContainer()" data-ng-class="{'search-input':userSearch,
                     'search-input-closed':!userSearch}"
                     class="search-input-closed">
          <div class="uk-width-1-3 center-pane">
                          
                            <div class="uk-button-dropdown" title="Click here" data-uk-dropdown="{mode:'click'}">
                                <button type="button" class="uk-button uk-button-primary qt-button-dropdown-material">
                                    <span class="qt-dropdown-text-material">Types</span>
                                </button>

                                <div class="uk-dropdown qt-dropdown uk-dropdown-scrollable" style="">
                                    <ul class="uk-nav uk-nav-dropdown" id="kb_menu">
                                         <li key-navigation ng-repeat="item in items">
                            <a href="">{{item}}</a>
                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
        </div>               
       
    </form>
    </div>
</div>

CSS

.menu-item:hover{
    background: #666;   
    cursor: pointer;
}
.center-pane {
    margin: 0 50%;
}
.search-input-closed {
  background: none repeat scroll 0 0 #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
  margin-top: 10px;
  max-height: calc(44vh);
  overflow-y: auto;
  position: absolute;
  padding: 15px;
  opacity: 0;
  transform: translateY(-110%);
  visibility: hidden;
  transition: all 0.2s ease 0s, visibility 0.2s ease 0s;
  width: 100%;
  box-sizing: border-box;
  z-index: -99999;
}
.search-input {
  background: none repeat scroll 0 0 #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
  margin-top: 10px;
  max-height: calc(80vh);
  position: absolute;
  opacity: 1;
  transform: translateY(0px);
  transition: all 0.2s ease 0s, visibility 0.2s ease 0s;
  width: 100%;
  z-index: -99999;
  padding: 15px;
  border: none;
  border-radius: 2px;
  box-sizing: border-box;
}

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('TestCtrl',function($scope){
    $scope.items=['menu item 1','menu item 2'];
    $scope.openSearch = function(){
            $scope.userSearch = true;
        };
        
  $scope.hideSearchContainer = function(){
    $scope.userSearch = false;
  };
    $scope.itemClicked = function(item, event, index){
        
    }
    
    $(document).on('click', '.uk-dropdown', function() {
        $(this).parents('[data-uk-dropdown]:first').removeClass('uk-open');
    });
});

myApp.directive('hideSearch', function($document){
    return {
        restrict: 'A',
        link: function(scope, elem, attr, ctrl) {
            elem.bind('click', function(e) {
                e.stopPropagation();
            });
            $document.bind('click', function() {
                scope.$apply(attr.hideSearch);
            })
        }
    }
});