selected values are not setting in md-select angularjs

Question

I have a hostSettings object in which there is a host object. "cohostLists" is an array of host object. I'm getting the "cohostLists" as an array of objects and the selected cohost are also saved but not being set in page.

model

@ManyToMany(cascade = CascadeType.PERSIST)
@JoinTable(name = "host_settings_cohost_list",
           joinColumns = @JoinColumn(name="host_settings_id", referencedColumnName="ID"),
           inverseJoinColumns = @JoinColumn(name="cohost_lists_id", referencedColumnName="ID"))
private Set<Host> cohostLists = new HashSet<>();

html

     <md-input-container flex="55">

                        <md-select ng-model="vm.hostSettings.cohostLists"  multiple="true" ng-click="vm.getCoHostList()">
                            <md-optgroup >
                                <md-option ng-value="host" ng-repeat="host in vm.coHostList">{{host.user.firstName}}</md-option>
                            </md-optgroup>

                        </md-select>
                        </md-input-container>

cohostLists :

  cohostLists:Array[1]
0:Object
$$mdSelectId:1
deleted:false
department:null
designation:"director"
dob:null
id:2
mobileNumber:"98765"
officePhoneNumber:"34355"
organisation:null
profilePic:"dir.jpg"

user:Object
activated:true
deleted:null
email:"host@gh.fgbd"
firstName:"host1"
id:5
langKey:"en"
lastName:"hh"
login:"host"
organisation:null
resetDate:null
resetKey:null

I think the problem is in md-select code.But I couldnt find the bug

Answer 1

Finally I got the answer

Change the html code like this:

<md-select ng-model="vm.hostSettings.cohostLists"
           ng-model-options="{trackBy: '$value.id'}" multiple="true">
    <md-option ng-value="host" ng-repeat="host in vm.coHostList">{{
        host.user.firstName}}
    </md-option>
</md-select>