Angularjs Select with group and initial value

I have a form that includes a SELECT element. I load the possible values in my controller from a function that returns the data from a database. I want to group the options by a group name.

I have the list of options loading properly showing the grouping. My problem, is the initial value is not displaying – this is based on a data model. It shows as blank. If I choose any option in the list, it does properly display.

I followed the example from this solution Populate a Dropdown list by grouping using AngularJs

From the various other examples that I have seen, this should work…I’m guessing it is some little thing I accidentally overlooked.

This loads the possible values for the drop down:

    $http.get("api/getIndustry").success(function(data){
        $rootScope.industryData = [];
        $.each(data, function (i, data) {
            $rootScope.industryData.push({
                group: data.group,
                id: data.id, 
                text:  data.text
            });
        });                      
    });

For now, I am trying to initially set a selected value (eventually it will be set from reading a record):

    $scope.example3model = {group: 'Energy and Natural Resources', id: '25', text: 'Utilities'};

And this is a portion of my view.

<td colspan="4" ng-hide="editableForm.$visible">
    <select ng-model="example3model" class="form-control input-md" ng-options="industry.text group by industry.group for industry in industryData" >
    </select></br>
        <- did this to see what was chosen
</td>

I’m not sure what else to try to get this to work…the only problem I see right now is that the list is not showing the ‘default’ value of what is initially in example3model (so the list shows as blank). If I choose a value in the list it is displayed correctly.

Any suggestions would be greatly appreciated.

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/10/11/angularjs-select-with-group-and-initial-value/
via @lzomedia #developer #freelance #web #lzomedia.com