Get a object from multidimensional array and display it on dropdown - AngularJS - angularjs

Question

I am trying to get "children" object from nested array, well, the problem is how to pull "childrens" and display them in dropdown options? For example:
[
{
"id": 1,
"name": "someName",
"children": [
{
"id": 2,
"name": "children_lvl_1",
"children": [
{
"id": 3,
"name": "children_lvl_2",
}
]
"children": [
{
"id": 4,
"name": "children_lvl_3",
}
]
}
]
}
]
The original idea is to get something like here:
https://embed.plnkr.co/plunk/Vn1zH5
So far I tried something like below, that wasnt writen by me.
Data.post('documentCategories/read', {}).then(function(results) {
if (results.status === "success") {
$scope.model.categories = parseCategories(results.data, -1, $scope.tag);
$scope.model.categoryTree = results.data;
var obj = $scope.model.categoryTree = results.data;
// console.log($scope.model.categoryTree);
const node = getNode($scope.model.categoryTree, $scope.document.category_id);
if (node) {
parseExpirationRanges(node);
$scope.model.categoryTags.splice(0, $scope.model.categoryTags.length);
$scope.model.categoryTags = node.categoryTags.slice();
}
}
if (results.status === "error") {
$.notify(results.message, "error");
}
return 0;
});
<div class="form-group">
<label class="col-sm-4 control-label no-padding-right">Categorys</label>
<div class="col-sm-8">
<span class="block input-icon input-icon-right">
<select ng-model="document.category" class="form-control"
ng-options="category as category.name for category in model.categoryTree" required></select>
</span>
</div>
</div>
Any fresh ideas are welcome.
Tnx

Answer 1

Have ng-model for each select and in ng-options of second and third select iterate through .children of previous select's model variable
<select ng-model="select1" ng-options="node as node.name for node in data"></select>
<select ng-model="select2" ng-options="node as node.name for node in select1.children"></select>
<select ng-model="select3" ng-options="node as node.name for node in select2.children"></select>
angular.module('app', []).controller("ctrl", function ($scope) {
$scope.data = [{
"id": 1,
"name": "Lvl1 Example 1",
"children": [{
"id": 4,
"name": "Lvl2 Example 4",
"children": [{
"id": 8,
"name": "Lvl3 Example 8",
}]
},
{
"id": 5,
"name": "Lvl2 Example 5",
"children": [{
"id": 9,
"name": "Lvl3 Example 9",
}]
}
]
},
{
"id": 2,
"name": "Lvl1 Example 2",
"children": [{
"id": 6,
"name": "Lvl2 Example 6",
"children": [{
"id": 10,
"name": "Lvl3 Example 10",
}]
}]
},
{
"id": 3,
"name": "Lvl1 Example 3",
"children": [{
"id": 7,
"name": "Lvl2 Example 7",
"children": [{
"id": 11,
"name": "Lvl3 Example 11",
}]
}]
}
]
});
<div ng-app="app" ng-controller="ctrl">
<select ng-model="select1" ng-options="node as node.name for node in data"></select>
<select ng-model="select2" ng-options="node as node.name for node in select1.children"></select>
<select ng-model="select3" ng-options="node as node.name for node in select2.children"></select>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>