title: AngularJS chained select
body: <pre><code>&lt;select multiple ng-model="comp" ng-options="c.name for c in companies | unique: 'company'" style="width: 100%; height: 200px; float: left; margin-bottom: 20px"&gt;&lt;/select&gt;
  
  &lt;table&gt;
    &lt;tr ng-repeat="c in comp"&gt;
      &lt;td&gt;{{ c.id }}&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;select multiple ng-model="dep" ng-options="c.name for c in departments | filter: {company_id: comp.id}" style="width: 100%; height: 200px; float: left; margin-bottom: 20px"&gt;&lt;/select&gt;
  &lt;select multiple ng-model="pos" ng-options="c.name for c in positions | unique: 'position' | filter: {department_id: dep.id}" style="width: 100%; height: 200px; float: left"&gt;&lt;/select&gt;
  </code></pre>
  
  <p>Is what my code looks like, but it works only partially. If I loop it through <code>ng-repeat</code>, the <code>c.id</code> prints out fine, when I click on the company in the select box. Trouble is - it doesn't print out at other select boxes where I want to filter the results. What could be the cause of that?</p>
  
  <p><strong>JSFiddle:</strong> <a href="http://jsfiddle.net/9Ymvt/853/" rel="nofollow">http://jsfiddle.net/9Ymvt/853/</a></p>