AngularJS ng-click not working properly

Question

Code:

<div class="input-dropdown-wrapper d-flex space-between vertical-center margin-right-12"
                             ng-class="{'active': historyController.showFilterHistoryDurationDropdown === true}"
                             ng-click="historyController.showFilterHistoryDurationDropdown = true"
                             when-clicked-off="historyController.showFilterHistoryDurationDropdown = false">
                            <p>
                                Show {{historyController.filter}}
                            </p>
                            <i class="fas fa-angle-down"></i>
                            <ul class="input-dropdown"
                                ng-if="historyController.showFilterHistoryDurationDropdown">
                                <li ng-class="{'active': historyController.filter === 'All'}"
                                    ng-click="historyController.filter = 'All';
                                    historyController.showFilterHistoryDurationDropdown = false">
                                    Show All
                                </li>
                                <li ng-class="{'active': historyController.filter === 'In Progress'}"
                                    ng-click="historyController.filter = 'In Progress';
                                    historyController.showFilterHistoryDurationDropdown = false">
                                    Show In Progress
                                </li>
                                <li ng-class="{'active': historyController.filter === 'Completed'}"
                                    ng-click="historyController.filter = 'Completed';
                                    historyController.showFilterHistoryDurationDropdown = false">
                                    Show Completed
                                </li>
                            </ul>
                        </div>

All of this works perfectly. When the <div class="input-dropdown-wrapper...> gets clicked, the <ul> appears as it should.

What I don't understand is why the second part of the ng-click of each <li> doesn't work at all.

Specifically talking about this part: historyController.showFilterHistoryDurationDropdown = false".

Setting this value to false should hide the <ul>, just like when you click the <div>, it sets the value to true, causing the <ul> to appear.

Answer 1

If you are looking for some Toggle view solution, ng-click logic should toggle the showFilterHistoryDurationDropdown value Like :

ng-click="historyController.showFilterHistoryDurationDropdown
          ? historyController.showFilterHistoryDurationDropdown = false
          : historyController.showFilterHistoryDurationDropdown = true"

So that when you click on the div having the ng-class will show the list (<ul>), on second click it will hide the list (<ul>) So your final code should look something like:

<div class="input-dropdown-wrapper d-flex space-between vertical-center margin-right-12"
    ng-class="{'active': historyController.showFilterHistoryDurationDropdown === true}"
    ng-click="historyController.showFilterHistoryDurationDropdown ? historyController.showFilterHistoryDurationDropdown = false : historyController.showFilterHistoryDurationDropdown = true"
    when-clicked-off="historyController.showFilterHistoryDurationDropdown = false">
  <p>
      Show {{historyController.filter}} <br>
      showFilterHistoryDurationDropdown : {{historyController.showFilterHistoryDurationDropdown}}
  </p>
  <i class="fas fa-angle-down"></i>
  <ul class="input-dropdown"
      ng-if="historyController.showFilterHistoryDurationDropdown">
      <li ng-class="{'active': historyController.filter === 'All'}"
          ng-click="historyController.filter = 'All';
          historyController.showFilterHistoryDurationDropdown = false">
          Show All
      </li>
      <li ng-class="{'active': historyController.filter === 'In Progress'}"
          ng-click="historyController.filter = 'In Progress';
          historyController.showFilterHistoryDurationDropdown = false">
          Show In Progress
      </li>
      <li ng-class="{'active': historyController.filter === 'Completed'}"
          ng-click="historyController.filter = 'Completed';
          historyController.showFilterHistoryDurationDropdown = false">
          Show Completed
      </li>
  </ul>

Hope this helps.. :)