AngularJS Material - Show/hide elements with md-option

Question

I'm trying to build a dropdown menu with checkboxes that show/hide certain elements when cheked/unchecked using AngularJS Material.

Normally I'd use md-checkbox and a combintion of ng-model on the checkbox and ng-show on the element to be shown or hidden, but I'm trying to do it with the Select Header, as seen on the AngularJS Material website, and it doesn't work.

Here's the code:

<md-select ng-model="filters" multiple>
    <md-select-header>
        <input placeholder="" class="md-text">
    </md-select-header>
    <md-optgroup>
        <md-option ng-value="filter-1" ng-model="showDiv">Attribute</md-option>
        <md-option ng-value="filter-2" ng-model="showOther">Another Attibute</md-option>
    </md-optgroup>
</md-select>

<div ng-show="showDiv || notice.status.visibility">
    This is some content.
</div>
<div ng-show="showOther || notice.status.visibility">
    This is more content.
</div>

Any solutions that don't envolve using javascript are most welcome!

Answer 1

Although it isn't a very elegant solution, I managed to make this work using ng-click, as seen below:

<md-select ng-model="filters" multiple>
    <md-select-header>
        <input placeholder="" class="md-text">
    </md-select-header>
    <md-optgroup>
        <md-option ng-value="filter-1" ng-click="showDiv = ! showDiv">Attribute</md-option>
        <md-option ng-value="filter-2" ng-click="showOther = ! showOther">Another Attibute</md-option>
    </md-optgroup>
</md-select>

<div ng-show="showDiv || notice.status.visibility">
    This is some content.
</div>
<div ng-show="showOther || notice.status.visibility">
    This is more content.
</div>