title: Unable to retrieve dropdown ng-model value using ng-if, in Angular Js
body: <p>I have 3 <code>dropdowns</code>.Dropdown first will control, out of <code>Dropdown 2</code> &amp; <code>Dropdown 3</code> which dropdown to populate.<br/>
  <br/>
  I am doing this using <code>ng-if</code>, I am able to use <code>ng-if</code> with the second dropdown, but when I unable to use <code>ng-if</code> with the third dropdown.<br/><br/>
  Reason I figured out is, <code>dropdown 2</code> is not binding any value with it.<br/><br/>
  I don't know why this is happening.<br/><br/>
  <strong>code</strong></p>
  
  <pre><code>&lt;select ng-model="selcetedValue"&gt;
    &lt;option value="A"&gt;A&lt;/option&gt;
    &lt;option value="B"&gt;B&lt;/option&gt;
    &lt;option value="C"&gt;C&lt;/option&gt;
    &lt;option value="D"&gt;D&lt;/option&gt;
  &lt;/select&gt;
  &lt;select ng-model="selcetedValueSecond" ng-if="selcetedValue === 'B'"&gt;
    &lt;option value="E"&gt;E&lt;/option&gt;
    &lt;option value="F"&gt;F&lt;/option&gt;
    &lt;option value="G"&gt;G&lt;/option&gt;
    &lt;option value="H"&gt;H&lt;/option&gt;
  &lt;/select&gt;
  &lt;select ng-model="selcetedValueThird" ng-if="selcetedValueSecond === 'H'"&gt;
    &lt;option value="I"&gt;I&lt;/option&gt;
    &lt;option value="J"&gt;J&lt;/option&gt;
    &lt;option value="K"&gt;K&lt;/option&gt;
    &lt;option value="L"&gt;L&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;p&gt;Selected value from first dropdown:: &lt;i&gt;{{selcetedValue}}&lt;/i&gt;&lt;/p&gt;
  &lt;p&gt;Selected value from second dropdown:: &lt;i&gt;{{selcetedValueSecond}}&lt;/i&gt;&lt;/p&gt;
  </code></pre>
  
  <p><br/>
  Please help.</p>