How to close element when click outside the element using AngularJs Only?
<p>This is my code</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$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;
};</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="tab-panel"&gt;
  &lt;a href="" class="second-panel-search" click-anywhere-but-here ng-click="searchHide()"&gt;&lt;i class="nc-icon-mini ui-1_zoom" ng-class="{'active': selectMenuSetting === 'SearchPanel'}"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;a href="" class="second-panel-search" click-anywhere-but-here ng-click="showSearchPopUp()"&gt;&lt;i class="nc-icon-mini ui-3_select" ng-class="{'active': selectMenuSetting === 'SearchPopUp'}"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/div&gt;

&lt;div class="second-search-hide-panel padt5" ng-if="secondPanelShow"&gt;
  &lt;div class="second-search-input "&gt;
    &lt;input type="text" placeholder="text" ng-model="searchText" ng-change="refreshData(searchText)"&gt;&lt;i class="nc-icon-mini ui-1_zoom active"&gt;&lt;/i&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class="second-search-hide-panel" ng-if="secondColumn"&gt;
   &lt;div class="second-search-input" ng-if="showObjectTypes"&gt;
  &lt;div class="second-search-input"&gt;
            &lt;label class="control-label"&gt;Type&lt;/label&gt;
            &lt;select class="form-control" ng-model="objectType" ng-change="callingGetData(objectType)"&gt;
              &lt;option value="major"&gt;Major Objects&lt;/option&gt;
              &lt;option value="support"&gt;Supporting Objects&lt;/option&gt;
              &lt;option value="lookup"&gt;LookUp Objects&lt;/option&gt;
           &lt;/select&gt;
     &lt;/div&gt;
   &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>In the above code contains two anchor tags. When I click first anchor tag display search text field and when click second anchor tag show dropdown. But, when I click outside the element I want to hide the anchor tags using AngularJS without using jQuery.</p>