How do I hide a choice field if there are no options in it

Question

I have two dynamic select fields. The first choice field is loaded from a list and dependant on what you select it then populates the second select field.

I'm have a problem where I want to hide the second select field if it doesn't have any option in it but nothing seems to work

I've tried ng-if="caseDetails.Subcategory1.length === 0" (this just hides the control and doesn't show anything if there is options) and ng-if="caseDetails.Subcategory1.length < 1"

Primary select field code code

<select class="form-control ng-pristine ng-valid ng-empty ng-touched" 
        id="exampleFormControlSelect8"
        ng-options="caseType for caseType in caseTypes"
        ng-model="caseDetails.Casetype"
        ng-change="onCaseTypeChanged()">
    <option value="?" selected="selected"></option>
    <option label="option1" value="string:option1">option1</option>
    <option label="option2" value="string:option2">option2</option>
    <option label="option3" value="string:option3">option3</option>
    <option label="option4" value="string:option4">option4</option>
</select>

Below is the code where it has no options but loads a blank option anyway.

<select ng-options="subCategory for subCategory in getPrimaryCategories()"
        ng-model="caseDetails.Subcategory1"
        ng-change="onPrimaryCategoryChanged()">
    <option value="?" selected="selected"></option>
</select>

Below is the code where it has options

<select ng-options="subCategory for subCategory in getPrimaryCategories()" 
        ng-model="caseDetails.Subcategory1"
        ng-change="onPrimaryCategoryChanged()">
    <option value="?" selected="selected"></option>
    <option label="option1" value="string:option1">option1</option>
    <option label="option2" value="string:option2">option2</option>
    <option label="option3" value="string:option3">option3</option>
    <option label="option4" value="string:option4">option4</option>
</select>

    $scope.getPrimaryCategories = function(){
        var matches = [];

        var mappings = $scope.caseTypeMappings;
        for(var i = 0; i < mappings.length; i++){
            var mapping = mappings[i];
            if(mapping.Casetype == $scope.caseDetails.Casetype && mapping.Subcategory1 != null) {
                for(var j = 0; j < mapping.Subcategory1.length; j++){
                    if(mapping.Subcategory1[j] && matches.indexOf(mapping.Subcategory1[j]) < 0) {
                        matches.push(mapping.Subcategory1[j]);
                    }
                }
            }
        }

        return matches;
    }

Answer 1

Save the results of the getPrimaryCategories() function and use its length to show the control:

<select ng-options="subcat for subcat in (subcatArr = getPrimaryCategories())"
        ng-show="subcatArr.length"
        ng-model="caseDetails.Subcategory1"
        ng-change="onPrimaryCategoryChanged()">
</select>