title: Html and AngularJS
body: <p>I have 3 drop down lists which have to come one after another.</p>
  
  <pre><code>&lt;select ng-model="vm.filter.location"&gt;
    &lt;option value="Andhra Pradesh" ng-if="vm.isDistrict &amp;&amp; !vm.isMandal &amp;&amp; !vm.isVillage"&gt;All Districts&lt;/option&gt;
    &lt;option ng-repeat="location in vm.geoGraphList" value="{{location}}" ng-if="vm.isDistrict &amp;&amp; !vm.isMandal &amp;&amp; !vm.isVillage"&gt;{{ location }}&lt;/option&gt;
    &lt;option ng-if="vm.isMandal &amp;&amp; !vm.isVillage &amp;&amp; !vm.isDistrict" selected disabled&gt;All Mandals&lt;/option&gt;
    &lt;option ng-repeat="location in vm.mandalList" value="{{location}}" ng-if="vm.isMandal &amp;&amp; !vm.isVillage &amp;&amp; !vm.isDistrict"&gt;{{ location }}&lt;/option&gt;
    &lt;option ng-if="vm.isVillage &amp;&amp; !vm.isMandal &amp;&amp; !vm.isDistrict" selected disabled&gt;All Villages&lt;/option&gt;
    &lt;option ng-repeat="location in vm.villageList" value="{{location}}" ng-if="vm.isVillage &amp;&amp; !vm.isMandal &amp;&amp; !vm.isDistrict"&gt;{{ location }}&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>First list contains list of districts , in which if I select a district and click submit , i am getting list of mandals and on selecting a mandal i am getting list of villages.</p>
  
  <p>In first list i am getting the default option as "ALL DISTRICTS" but in other lists i am not able to get the default option on the list.
  I even added the "selected disabled" in  tag.
  A little help would be appreciated?</p>