如何使用AngularJsOnly在元素外部单击时关闭元素

这是我的代码

$scope.searchHide = function() {
  $scope.selectMenuSetting = "SearchPanel";
  $scope.secondPanelShow = !$scope.secondPanelShow;
  $scope.secondColumn = false;
};
$scope.showSearchPopUp = function() {
  $scope.selectMenuSetting = "SearchPopUp";
  $scope.secondColumn = !$scope.secondColumn;
  $scope.secondPanelShow = false;
};

<div class="tab-panel">
  <a href="" class="second-panel-search" click-anywhere-but-here ng-click="searchHide()"><i class="nc-icon-mini ui-1_zoom" ng-class="{'active': selectMenuSetting === 'SearchPanel'}"></i></a>
  <a href="" class="second-panel-search" click-anywhere-but-here ng-click="showSearchPopUp()"><i class="nc-icon-mini ui-3_select" ng-class="{'active': selectMenuSetting === 'SearchPopUp'}"></i></a>
</div>
<div class="second-search-hide-panel padt5" ng-if="secondPanelShow">
  <div class="second-search-input ">
    <input type="text" placeholder="text" ng-model="searchText" ng-change="refreshData(searchText)"><i class="nc-icon-mini ui-1_zoom active"></i>
  </div>
</div>
<div class="second-search-hide-panel" ng-if="secondColumn">
   <div class="second-search-input" ng-if="showObjectTypes">
  <div class="second-search-input">
            <label class="control-label">Type</label>
            <select class="form-control" ng-model="objectType" ng-change="callingGetData(objectType)">
              <option value="major">Major Objects</option>
              <option value="support">Supporting Objects</option>
              <option value="lookup">LookUp Objects</option>
           </select>
  	  </div>
   </div>
</div>

在上面的代码中包含两个锚点标记。当我单击第一个锚定标记时显示搜索文本字段，当单击第二个锚定标签时显示下拉列表。但是，当我点击元素外部时，我想使用AngularJS隐藏锚标记，而不使用jQuery。