How to display text instead of Id in select drop down in lazy load?

I have a select drop down which populates data in lazy mode from a URL. The key for the drop down is called Model_ID and is an int type. I get this key from the server and populate the drop down with this key. It works fine, however because of lazy load drop down may not have all the values so it cannot match Model_ID with corresponding Model_Name, therefore it display the Model_Id instead. How can I display Model_Name in above scenario. I have to use Model_ID as a key because it is linked to a lookup table. I have tried to use Model_Name in addition to Model_ID in MyData variable and labelProperty: 'Model_Name' in a unsuccessful attempt to achieve my goal but I guess that is not a correct way.

Code can be checked in the fiddle as well as below.

var MyData = 
{
 "Model_ID": 1863  ,//database stores int so I have to return int to link with key: Model_ID
 'Model_Name': 'Civic'//An attempt to display name
 };

Formio.createForm(document.getElementById('formio'), {
  components: [
    {
      type: 'select',
      label: 'Model',
      key: 'Model_ID',
      placeholder: 'Select your model',
      dataSrc: 'url',      
      data: {
        url: 'https://vpic.nhtsa.dot.gov/api/vehicles/getmodelsformake/honda?format=json'
      },
      valueProperty: 'Model_ID',
      labelProperty: 'Model_Name',//This may be wrong
      template: '<span>{{ item.Model_Name }}</span>',
      selectValues: 'Results'
    }
  ]
}).then((form) => {
                form.submission = {
                    data: MyData
                };});

[randallknutson]

Here’s an example form: https://jxijnknquwhvpuv.form.io/selectobjectdemo

[randallknutson]

I think we still have a bug around this where if you have a valueProperty set and load data from an external url it won’t properly find the item the first time and adds it to the options as the value. I’ll bump this issue in our todo list and see if we can get it resolved.