Angular ng-Parameters in a recursive template

Question

I can display all the data in one drop-down list, but I want to create another drop-down menu.

My JSON data looks like this:

[
{
    field: "tenantId",
    index: true,
    isRequired: true,
    instance: "String"
},

{
    field: "channels",
    index: null
},

{
    field: "contractedProducts",
    values: [
        {
            field: "variantId",
            index: null,
            instance: "String"
        },
        {
            field: "altExtProductId",
            index: null,
            instance: "String"
        }
    },
    {
        field: "prices",
        values: [
            {
                field: "variantId",
                index: null,
                instance: "String"
            },
            {
                field: "statusId",
                index: null,
                instance: "String"
            },
            {
                field: "currencyId",
                index: null,
                isRequired: true,
                instance: "String"
            },
            {
                field: "priceTypeId",
                index: null,
                instance: "String"
            }
        ]
    }
]

First I will show the field values ​​in the JSON dropdown menu. For example, if I select the value of the first field from the dropdown.Then select it ok.But if I select the one that has the value field as well. For example, for example, contractedProducts.So, when I select contractedProducts, then it should dynamically generate another drop-down menu with all of these fields nested in it!

Edit:

You need to create this using only one select element in the HTML. Is it possible to do this?

Recursive HTML markup:

<div class="row left">
            <div ng-repeat="condition in subcondition.conditions">
                <div class="form-inline" style="margin-bottom:10px;">
                    <div ng-repeat="key in condition.keys">
                        <div class="form-group mb-left">
                            <select class="form-control" ng-model="key" ng-options="s as s.field for s in staticValues|subDocumentsFilter:key:staticValues"  ng-change="recursiveSubdocuments(key, condition.indexOf(condition));" ng-init="keys[0].propertyId" required>
                                <option value="">choose one</option>
                            </select>
                        </div>
                    </div>
                    <custom-fields></custom-fields>
                    <div class="form-group mb-left">
                        <button ng-click="deleteExpression(condition, $parent.subcondition.conditions)"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
                    </div>

                </div>
            </div>
        </div>
        <div class="row left">
            <div ng-repeat="subcondition in subcondition.subconditions" ng-include="'subcondtion'" ng-init="parent = $parent.$parent.subcondition"></div>
        </div>

Angular Code:

var _scope = {};
        $scope.arrayValue = {};
        function condition() {
                this.keys =[{propertyId:'product'}],
                this.operator = '',
                this.value = ''
        }

        function subcondition() {
                this.allany = 'all',
                this.conditions = [new condition()],
                this.subconditions = []
        }
        // $scope.expressions = myExpression;
        $scope.expressions = [new subcondition()];

        $scope.staticJson = function() {
            $http.get('http://modulus-linkup-45480.onmodulus.net/getProductSchema')
                .success(function(data) {
                    $scope.staticValues = data.attributes;
               //      //  var out = [];
               //      // angular.forEach($scope.staticValues, function(d){
               //      //     angular.forEach(d.fields, function(v){
               //      //       out.push({propertyId: v.field})
               //      //     })
               //      // })
               // return out;
                }).error(function(error) {});
        }

Answer 1

ngShow , values:

<select 
    ng-options="item.field for item in items"
    ng-model="item"
></select>

<select 
    ng-show="item.values"
    ng-options="sub.field for sub in item.values"
    ng-model="subitem"
></select>

: http://plnkr.co/edit/C7YKTDlynlcfkrlSCvQ0?p=preview