Angular ng-if hiding the elements without any condition on them

I have just began working in angular after months of working on VueJs. I am facing a confusing problem here.

<div class="form-group">
    <label class="col-sm-3 control-label">ABS</label>
    <div class="col-sm-6">
        <input type="text" ng-model="absTarget" class="form-control" placeholder="Set Target" />
    </div>
</div>

<div class="form-group" ng-if="SelectedTask.location">
<label class="col-sm-3 control-label">Location</label>
<div ng-dropdown-multiselect="" options="example10data" selected-model="absLocation" checkboxes="true" extra-settings="setting1" />
</div>
<br />

<div class="form-group">
    <label class="col-sm-3 control-label">Seven Star</label>
    <div class="col-sm-6">
        <input type="text" ng-model="ssTarget" class="form-control" placeholder="Set Target" />
    </div>
</div>

<div class="form-group" ng-if="SelectedTask.location">
<label class="col-sm-3 control-label">Location</label>
<div ng-dropdown-multiselect="" options="example10data" selected-model="ssLocation" checkboxes="true" extra-settings="setting1" />
</div>

<div class="form-group">
    <label class="col-sm-3 control-label">DEN</label>
    <div class="col-sm-6">
        <input type="text" ng-model="denTarget" class="form-control" placeholder="Set Target" />
    </div>
</div>

<div class="form-group" ng-if="SelectedTask.location">
<label class="col-sm-3 control-label">Location</label>
<div ng-dropdown-multiselect="" options="example10data" selected-model="denLocation" checkboxes="true" extra-settings="setting1" />
</div>

This is my selected task object :

{"name":"SMS report","location":false}

So basically I have to show the 2nd,4th and 6th elements only when SelectedTask.location is true.

The problem is whenever SelectedTask.location equals false, then only 1st div element is visible, rest all becomes hidden

Source: New feed
Source Url Angular ng-if hiding the elements without any condition on them