angularjs ng-show multiple divs and clean unselected model values

Question

I have input field with dropdown values: A, B, ... Z, referred to as ng-model=model.all.
I want to ng-show another <div> if the value of ng-model=model.all is equal to Option Z. This part is working fine. But the question is:

How can I show the Acat <div> ONLY if any other value except Option Z is chosen from the first one? I tried ng-show="model.all != 'Option Z' , but it shows the <div> even when nothing is selected. It just need to show the other div ONLY IF something other than Option Z is selected.

As you can see, my Bcat is shown only if the Acat is not empty, which is alright.
But, if I change my selection in the first one and choose Option Z, then the other two divs still hold their values, so the goal is to clean them if Option Z is selected, and vice versa, if something else is selected and accordingly, the other divs are populated with values, and if user decides to change the selection and choose Option Z then those values in previous divs should be cleaned as well.

<div class="form-group">
    <label class="control-label">ALL</label>
    <ui-select ng-model="model.all" name="all">
        ...
    </ui-select>
</div>


<div class="form-group" ng-show="model.all == 'Option Z'">
    <label>Z categories</label>
    <ui-select name="Zcat" ng-model="model.z">
        ...
    </ui-select>    
</div>

<div class="form-group" ng-show="???">
    <label class="control-label">Category A</label>
    <ui-select name="Acat" ng-model="model.a">
        ...
    </ui-select>
</div>
<div class="form-group" ng-show="!model.a">
    <label class="control-label">Category B</label>
    <ui-select name="Bcat" ng-model="model.b" >
        ...
    </ui-select>
</div>

update:

just a short note to add after Mosh Feu's answer:
As you can see here in screenshot https://i.sstatic.net/z9mYH.jpg , this should never happen.
Either, I pass the
{"all": "Option Z", "z": "Option Z1"}
or
{"all": "Option A", "a": "Option A1", "b": "Option B1"} .
This is not accepted:
{"all": "Option A", "a": "Option A1", "b": "Option B1", "z": "null"}
nor this one :
{"all": "Option Z", "z": "Option Z1", "a": "null", "b": "null"}.

Answer 1

this might work for you:

<div class="form-group">
    <label class="control-label">ALL</label>
    <ui-select ng-model="model.all" ng-change="onModelChange()" name="all">
        ...
    </ui-select>
</div>


<div class="form-group" ng-show="model.all == 'Option Z'">
    <label>Z categories</label>
    <ui-select name="Zcat" ng-model="model.z">
        ...
    </ui-select>    
</div>

<div class="form-group" ng-show="!!model.all && model.all != 'Option Z'">
    <label class="control-label">Category A</label>
    <ui-select name="Acat" ng-model="model.a">
        ...
    </ui-select>
</div>
<div class="form-group" ng-show="!!model.a && model.all != 'Option Z'">
    <label class="control-label">Category B</label>
    <ui-select name="Bcat" ng-model="model.b" >
        ...
    </ui-select>
</div>

and here is the controller bit:

$scope.onModelChange = function(){
    if ($scope.model.all) {
        $scope.model.z = "";
        $scope.model.a = "";
        $scope.model.b = "";
    }
};