Dropdown depends on other dropdown - angularjs

Question

I'm having data in the form given below

   var servers =   [
           {
               "name": "server1",
               "version":
               [
                   "10.x"
               ]
           },
           {
               "name": "server2",
               "version":
               [
                   "1", "2"
               ]
           }
       ]

I want to have two drop down. First dropdown will display "name". When user selects name from the first dropdown, second dropdown should be populated with corresponding "version".

Non-working jsfiddle link: http://jsfiddle.net/fynVy/174/

Answer 1

You need to tweak your HTML template, so that the first drop down is displaying the server name, and that the options for the 2nd drop down are based upon the versions in the selected drop down (ngModel of the first drop down).

<div ng-controller="MyCntrl">
    <select ng-model="server" ng-options="x.name for x in servers"></select>
    <select ng-model="version" ng-options="val for val in server.version"></select>
</div>

working fiddle here