angularjs - ドロップダウンメニューを使用するAngularJSの方法

Question

私は次のアイテムを持っています：

<span ng-click="ui.toggleShow('company')" class="dropdown-trigger">
    <i class="icon-building"></i>
</span>
<span ng-click="ui.toggleShow('notifications')" class="dropdown-trigger">
    <i class="icon-info"></i>
</span>
...
<dropdown-element ng-show=...>

ui.toggleShow 関数は、コントローラーの次のオブジェクトにあります。

$scope.ui = {
  show: 'nothing',
  toggleShow: function(elem) {
    if (elem === $scope.ui.show) {
      $scope.ui.show = 'nothing';
    } else {
      $scope.ui.show = elem;
    }
  }
};

この部分は正常に機能しますが、このスパン タグをクリックすると、ドロップダウン要素を「切り替える」ことしかできません。

これを親タグで使用しようとしましui.toggleShowたが、(明らかに) この ui.show プロパティが常に上書きされるため、正しいタグをクリックしても、親をクリックしたため「何もありません」になります。

サイト内で jQuery やその他の DOM 操作を使用しないようにしています。

これらのスパンをクリックしてドロップダウン要素を開き、他の場所をクリックして閉じるようにコードを変更するにはどうすればよいですか? （角度的に）