Creating a series of dropdown menus based on an Object with key: [array of dropdown options] pairs?

Question

I've been having a LOT of trouble with this problem for the past couple days. Basically, I'm trying to create a series of dropdown menus based on a JSON return from a database. I was able to have it working just fine and dandy 2 days ago, but we just rewrote our backend code to return a differently formatted JSON and I have to rewrite a lot of stuff to get it working. The format of our name JSON is this:

provisions: {
   NAME OF DROPDOWN MENU1: [VALUE1, VALUE2, VALUE3, ..],
   NAME OF DROPDOWN MENU2: [VALUE1, VALUE2, VALUE3, ..],
   NAME OF DROPDOWN MENU3: [VALUE1, VALUE2, VALUE3, ..]
}

Based on that JSON, I want to create 3 dropdown menus that has the associated values within them. I also want to be able to display whatever the previously saved data return the server is (for example, if the user Selects Value 2 in the first dropdown and saves the page, the first dropdown will display Value 2 the next time they access that page).

Here is the HTML that I currently have to try and display the dropdown menus:

<form class="form-horizontal" ng-controller="GamePreferenceCtrl">
    <div ng-repeat="(name, section) in gameConfigs">
        <label ng-bind="name"></label>
        <select class="form-control" ng-model="formData.settings[$index].value" ng-change="dropdownItemClicked(name, formData.settings[$index].value)">
            <option value="" disabled="disabled">---Please Select Option---</option>
            <option ng-repeat="item in section" value="{{item.value}}" ng-bind="item.value"></option>
        </select>
    </div>
    <div class="col-md-12" ng-include="gametemp"></div>
    <div class="row">
        <div class="hr-line-dashed"></div>
        <div class="text-center col-md-12 padding-15">
            <button class="btn btn-primary btn-lg" ng-click="saveGameSetting()" formnovalidate translate>
                <i class='fa fa-circle-o-notch fa-spin' ng-if="showBusy"></i>&nbsp;Save
            </button>
        </div>
    </div>
</form>

The way that's written will display the dropdown menus with the appropriate name above them, but every option in the dropdown is blank. Any help on this is appreciated. Thank you.

Answer 1

Have you tried doing this instead?

<option ng-repeat="item in section" value="{{item.value}}">{{item.value}}</option>

I'm not sure that ng-bind has access to item.value, because ng-repeat is on the same element, so that may work better.