title: Link two select boxes using angular js
body: <p>I want to link two select boxes , with change in one will change other.</p>
  
  <p>Following is my code</p>
  
  <pre><code>{
    "Maths": [
      {
        "code": "John",
        "lastName": "Doe",
        "sex": "M"
      }
    ],
    "English": [
      {
        "code": "John",
        "lastName": "Doe",
        "sex": "M"
      },
      {
        "code": "John1",
        "lastName": "Doe1",
        "sex": "M1"
      },
      {
        "code": "John"
      }
    ]
  }
  </code></pre>
  
  <p>In the given code first dropdown should show only -English,Maths while other will show -lastName based on item chosen, 
  so if English is chosen in select box-1 then select box-2 option key= John1,value-Doe1.</p>
  
  <pre><code>&lt;select id="select_language" ng-model="myColor" ng-options="id  for (id, person) in test"&gt; &lt;/select&gt; 
  &lt;select id="select_dialect" &gt;&lt;/select&gt;
  </code></pre>
  
  <p>In addition to this i would like to have
  In the second dropdown we are populating the values in select box label. I also need to add option values which is related to code.
  So this would result in something like this</p>
  
  <pre><code>&lt;select id="select_dialect" ng-model="myColor1" ng-options="item.sex for item in myColor" class="ng-valid ng-dirty"&gt;
  &lt;option value="?" selected="selected"&gt;&lt;/option&gt;
  &lt;option value="John"&gt;M&lt;/option&gt;
  &lt;option value="John1"&gt;M1&lt;/option&gt;
  &lt;option value="John2"&gt;&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>