ui-select2 does not put the wanted value from code - angularjs

Question

I have few selects that looks like that:
<div class="row">
<div class="col-lg-4">
<label class="control-label" for="ModelSelect">Model </label>
<select ng-disabled="markedDic['make']!=true" class="form-control col-md-2" id="ModelSelect"
name="model" ui-select2
ng-model="carDetails.model">
<option ng-if="!carDetails.model" value="">[SELECT]</option>
<option ng-repeat="(model, value) in modelsDic" value="{{ model }}">{{ model}}</option>
</select>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<label class="control-label" for="VolumeSelect">Engine </label>
<select ng-disabled="markedDic['model'] != true" class="form-control col-md-2" id="VolumeSelect"
name="volume" ui-select2
ng-model="carDetails.volume">
<option ng-if="!carDetails.volume" value="">[SELECT]</option>
<option ng-repeat="(volume, value) in volumesDic" value="{{ volume }}">{{ volume }}</option>
</select>
</div>
</div>
As you can see, in every select the ng-disabled it dependent on markedDic[]
and the first option is following the same pattern
<option ng-if="!carDetails.volume" value="">[SELECT]</option>
When the form just loads, everything is fine, the default value is [SELECT] and then the rest of the values are the others.
But when I change in my javascript for example
carDetails.volume = "";
it makes the selected value in the select to be "" but still lets [SELECT] to be an option in the list.
While what I meant was that [SELECT] will be the option that is being showed as the selected value after my change in the js code.
What am I doing wrong?

Answer 1

Inside ng-if checking for not null and undefined can solve the problem. Try this because !"" will return truthy value.
ng-if="carDetails.model !== null && "carDetails.model !== undefined"
ng-if="carDetails.volume !== null && "carDetails.volume !== undefined"