Unable to bind value to ui-select on load

Question

I have the following html for my ui-select directive:

<div class="col-xs-12 col-sm-12 col-md-6">
    <div class="form-group">
        <label class="control-label small-font">Sample *</label>
        <ui-select ng-model="form.sample" theme="bootstrap" required>
            <ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match>
            <ui-select-choices repeat="sample in samples">
                {{ sample.name }}
            </ui-select-choices>
        </ui-select>
    </div>
</div>

This is my array:

$scope.samples = [
    {
        name: 'Sample 1'
    },
    {
        name: 'Sample 2'
    }
];

I am creating an edit form, all the values are returned from the server and loaded into their respective fields but i can't get the ui-select values to show.

I know there are other posts like these but i have tried their "solutions" and the all haven't helped me in anyway.

The value is in "form.sample" i want it to display as the selected item when the data is loaded.

Answer 1

Did you try :

$scope.samples = [
    {
    name: 'Sample 1'
},
{
    name: 'Sample 2'
}
];
$scope.sample = {};
$scope.sample.value = $scope.samples[0];

and take of the "form" from "form.sample"

<div class="col-xs-12 col-sm-12 col-md-6">
<div class="form-group">
    <label class="control-label small-font">Sample *</label>
    <ui-select ng-model="sample.value" theme="bootstrap" required>
        <ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match>
        <ui-select-choices repeat="itemSample in samples">
            {{ itemSample.name }}
        </ui-select-choices>
    </ui-select>
</div>

The ui select directive applys the value to a "select" child from the specify model, so if you pass form.sample the directive looks for the value on a child, and not in the form.sample, that's why you must pass a child property to the directive, it's hard to see