angular-menu

click outter

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<menu></menu>

CSS

.menu {
  display: none;
  background-color: #fff;
  width: 100px;
}

.show {
  display: block;
}

JavaScript

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

demo.directive('menu', function(){
    var ctrl = function($scope){
      $scope.listData = ['111','112','113'];
    };
    return {
        restrict: 'E',
        scope: {},
        controller:ctrl,
        link: function(scope, element, attrs) {
        		 scope.showMenu = function(e) {
                scope.displayMenu = true;
                e.stopPropagation();
                scope.searchCode();
            };
            scope.clickInner = function(e,name) {
             		scope.searchInput= name;
             		scope.displayMenu = false;
                e.stopPropagation();
            };
        		document.addEventListener('click', function(){
                scope.displayMenu = false;
                scope.$apply();
            }, false);
            
            
            scope.displayMenu = false;
           	scope.selectArray = scope.listData;
           
            scope.searchCode = function(){
            	scope.selectArray=[];
              if(scope.searchInput=='' || scope.searchInput == undefined){
              	scope.selectArray = scope.listData;
              }else{
                for(var i in scope.listData){
                  if(scope.listData[i].indexOf(scope.searchInput) >-1){
                    scope.selectArray.push(scope.listData[i]);
                  }
                }
              }
            	
            }
            
            
            
        },
        template: '<input class="showBtn" ng-click="showMenu($event)" ng-model="searchInput" ng-change="searchCode()"/>' +
                  '<div class="menu" ng-class="{show: displayMenu}">' +
                       '<ul>' +
                            "<li ng-repeat='name in selectArray'  ng-click='clickInner($event,name)'>{{name}}</li>" +
                      '</ul>' +
                  '</div>'
    };
});