Select does not always match initial model value in AngularJS

Question

I'm using a select box with a chosen directive. In my page the user is able to edit an object. A form in a bootstrap modal opens with the initial values which the user can then edit. All the input forms are required.

In my other select boxes the options all have id's which match correctly to the id of the initially set value. But one box only has three options, which are all only strings. I'm not sure where the problem comes in but the select box only matches the value in the model about 1 in 5 times. I have tried the solutions in other similar questions but none of them have worked. I've tried to build an example in jsfiddle but I haven't been able to duplicate the issue there.

An example of the hmtl:

<div class="modal-body">
    <form class="form-horizontal" name="editForm" novalidate>
        <div class="form-group" ng-class="{'has-error': editForm.inputType.$invalid}">
            <label for="inputType" class="col-sm-2 control-label">Type:</label>
            <select chosen
                    class="col-sm-7"
                    id="inputType"
                    name="inputType"
                    data-ng-model="formData.Type"
                    data-ng-options="type.Name as type.Name for type in typeList"
                    required>
                <option value="">Select a type</option>
            </select>
        </div>
    </form>
</div>

The controller function that loads the data to be edited:

$scope.edit = function(objectid) {
      var req = {
            method: 'GET',
            url: $scope.url + 'node/' + objectid + '/'
      }
      $http(req).success(function(response) {
            $scope.formData = response;
            $scope.formData.id = objectid;
      });
};

And typeList is structured as:

$scope.typeList = [
    {"Name": "General"}, 
    {"Name": "Super"}, 
    {"Name": "Material"}
];

I've tested formData.Type === typeList[0].Name when the type is General and it returns true. Could the issue be with the chosen directive or the bootstrap modal?

Niel Niel · Accepted Answer · 2015-07-16T09:45:08

I wasn't able to find a solution for this so I just added an integer id to the list and based the select on that. It works correctly.

Select does not always match initial model value in AngularJS

1 Answers