angularjs ng-options key-value pair 3 levels deep

Question

I have a problem, i can't make 3 levels deep in ng-options, i was able to make work the 2 levels deep

Here is my code

Controller

$scope.names = {
            'Technology': [
                'Personal Computer',
                'Mobile Phone',
                'Console Game'
            ],
            'Healthcare': [
                'Blood Donation',
                'Injection',
                'Medical Care'
            ],
            'Housing': [
                'Repairs',
                'Gardening',
                'Plumbing',
                'Laundry'
            ]    
        };

HTML

<select ng-model="selectedName" ng-options="x for (x, y) in names">
</select>

<select ng-model="selectedNames" ng-options="x for x in selectedName">
</select>

This is working but only 2 levels deep, what i need is 3 levels deep.

So the $scope.names will be like this

Controller

$scope.names = {
            'Technology': [
                'Personal Computer': [
                    'some data', 
                    'some data'
                    ],
                'Mobile Phone': [
                    'some data', 
                    'some data'
                    ],
                'Console Game': [
                    'some data', 
                    'some data'
                    ]
            ],
            'Healthcare': [
                'Blood Donation': [
                    'some data', 
                    'some data'
                    ],
                'Injection': [
                    'some data', 
                    'some data'
                    ],
                'Medical Care': [
                    'some data', 
                    'some data'
                    ]
            ],
            'Housing': [
                'Repairs': [
                    'some data', 
                    'some data'
                    ],
                'Gardening': [
                    'some data', 
                    'some data'
                    ],
                'Plumbing': [
                    'some data', 
                    'some data'
                    ],
                'Laundry': [
                    'some data', 
                    'some data'
                    ]
            ]    
        };

How will i arrange my ng-options? it's not showing anything using ng-options="x for (x, y) in names"

Answer 1

Are you looking for something like this

 angular.module("app",[]) .controller("ctrl",function($scope){ $scope.names = { 'Technology': { 'Personal Computer': [ 'some data1', 'some data2' ], 'Mobile Phone': [ 'some data3', 'some data4' ], 'Console Game': [ 'some data5', 'some data6' ] }, 'Healthcare': { 'Blood Donation': [ 'some data', 'some data' ], 'Injection': [ 'some data', 'some data' ], 'Medical Care': [ 'some data', 'some data' ] }, 'Housing': { 'Repairs': [ 'some data', 'some data' ], 'Gardening': [ 'some data', 'some data' ], 'Plumbing': [ 'some data', 'some data' ], 'Laundry': [ 'some data' , 'some data' ] } }; }) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> <select ng-model="selectedName" ng-options="x for (x, y) in names" ng-change="getKeys(selectedName)"> </select> {{selectedName}} <select ng-model="selectedNames" ng-options="y as x for (x, y) in selectedName" > </select> {{selectedNames}} <select ng-model="selectedNames3" ng-options="x for x in selectedNames"> </select> {{selectedNames3}} </div>