How to enable dropdown buttons one by one in angularjs(Cascading dropdown)

Question

In cascading dropdowns ( eg:3 dropdowns), how to disable 2nd and 3rd dropdown initially and when user selects an option in 1st dropdown , 2nd dropdown should be enabled. And when the user selects an option in 2nd then 3rd dropdown should be enabled.

If anyone knows , please suggest me a way,how to do the above.

  <button class="btn btn-primary" type="button"  ng-click="openDropdown($event)">{{labelX}}
  <span ng-click="openDropdownFromA($event)"></span></button>
  <ul class="dropdown-menu " >
    <li ng-repeat="data in A"   ng-click="Data($event,data)" >
        <a>{{data}}</a>     
    </li>
  </ul>



  <button class="btn btn-primary" type="button"  ng-click="openDropdown($event)">{{labelY}}
  <span ng-click="openDropdownFromA($event)"></span></button>
  <ul class="dropdown-menu " >
    <li ng-repeat="data in B"   ng-click="Data($event,data)" >
        <a>{{data}}</a>     
    </li>
  </ul>



  <button class="btn btn-primary" type="button"  ng-click="openDropdown($event)">{{labelZ}}
  <span ng-click="openDropdownFromA($event)"></span></button>
  <ul class="dropdown-menu " >
    <li ng-repeat="data in C"   ng-click="Data($event,data)" >
        <a>{{data}}</a>     
    </li>
  </ul>

Answer 1

For example, you could use

ng-disabled="DropdownBDisabled"

on the dropdown that you want to enable\disable and then setup your on click method to change the value of the DropdownBDisabled variable accordingly.

Something like this