Show value of option when chosen on select in Angular

In the markup, you can define a hidden first option with the default selected value, and set a handler for the (change) event:

<select (change)="onSelectChange($event)">
  <option hidden value="+1">+1</option>
  <option value="+1">USA: +1</option>
  <option value="+66">THA: +66</option>
  <option value="+56">CHL: +56</option>
  <option value="+84">VN: +84</option>
</select>

Every time an option is selected:

• The value of the hidden option is set to the selected value
• The text of the hidden option is set to the selected value
• The hidden option is selected

onSelectChange(event: Event) {
  let select = event.target as HTMLSelectElement;
  select.options[0].value = select.value;
  select.options[0].text = select.value;
  select.selectedIndex = 0;
}

See this stackblitz for a demo.