使用angular js自定义下拉菜单

Question

我创建了一个地址搜索输入。当用户输入要输入的位置时，ajax请求正在工作。 $scope.resultLocation正在存储数据。当用户专注于#resultLocation时，我想显示#searchLocation。 Ng-focus工作正常，但是当我想单击ul时，列表已隐藏。我无法点击a标签。什么是替代方法？我该如何解决这个问题？

HTML

    <div class="collapse show multi-collapse w-100" id="multiCollapseExample1" data-parent="#tabs">
        <div class="itemContainer">
            <input type="text" autofocus maxlength="60" id="locationSearch" data-ng-focus="resultLocationStatus=true;" data-ng-blur="resulLocationStatus=false;" data-ng-keyup="findLocation();" data-ng-model="locationSearch" class="locationSearch" placeholder="search">
            <button class="icon-search btn btn-color3"></button>
        </div>
        <div class="col-12" id="resultLocation" data-ng-if="resultLocation && resultLocationStatus==true" style="position: absolute; z-index: 986; top: 100%; left: 0; right: 0;">
            <ul class="list-group scrollbar" style="max-height:300px;">
                <li class="list-group-item" ng-repeat=" opt in resultLocation">
                    <a class="d-block cpointer" href="{{parseLocation(opt.GeoObject.Point.pos.toString())}}"><span class="icon-map-location-6"> </span>{{ opt.GeoObject.metaDataProperty.GeocoderMetaData.text}}</a>                                    
                </li>
            </ul>
        </div>
    </div>

JS

        $scope.findLocation = function () {            
        $.ajax({
            type: 'get',
            url: "https://geocode-maps.yandex.ru/1.x/?&bbox=24.125977,34.452218~45.109863,42.601620&results=5&format=json&lang=tr_TR&geocode=" + $scope.locationSearch,
            dataType: 'json',
            success: function (data) {                    
                    $scope.resultLocation = data.response.GeoObjectCollection.featureMember;                    }                    
            },
            error: function (data) {}
        });
    }