title: Angular ng-if hiding the elements without any condition on them
body: <p>I have just began working in angular after months of working on VueJs. I am facing a confusing problem here.</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;label class="col-sm-3 control-label"&gt;ABS&lt;/label&gt;
      &lt;div class="col-sm-6"&gt;
          &lt;input type="text" ng-model="absTarget" class="form-control" placeholder="Set Target" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group" ng-if="SelectedTask.location"&gt;
  &lt;label class="col-sm-3 control-label"&gt;Location&lt;/label&gt;
  &lt;div ng-dropdown-multiselect="" options="example10data" selected-model="absLocation" checkboxes="true" extra-settings="setting1" /&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  
  &lt;div class="form-group"&gt;
      &lt;label class="col-sm-3 control-label"&gt;Seven Star&lt;/label&gt;
      &lt;div class="col-sm-6"&gt;
          &lt;input type="text" ng-model="ssTarget" class="form-control" placeholder="Set Target" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group" ng-if="SelectedTask.location"&gt;
  &lt;label class="col-sm-3 control-label"&gt;Location&lt;/label&gt;
  &lt;div ng-dropdown-multiselect="" options="example10data" selected-model="ssLocation" checkboxes="true" extra-settings="setting1" /&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
      &lt;label class="col-sm-3 control-label"&gt;DEN&lt;/label&gt;
      &lt;div class="col-sm-6"&gt;
          &lt;input type="text" ng-model="denTarget" class="form-control" placeholder="Set Target" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group" ng-if="SelectedTask.location"&gt;
  &lt;label class="col-sm-3 control-label"&gt;Location&lt;/label&gt;
  &lt;div ng-dropdown-multiselect="" options="example10data" selected-model="denLocation" checkboxes="true" extra-settings="setting1" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my selected task object : </p>
  
  <pre><code>{"name":"SMS report","location":false}
  </code></pre>
  
  <p>So basically I have to show the 2nd,4th and 6th elements only when SelectedTask.location is true.</p>
  
  <p>The problem is whenever SelectedTask.location equals false, then only 1st div element is visible, rest all becomes hidden</p>