Cant pass value from one view model to another in aurelia

Question

I have two views, in view two i have a select option in which if the user selects an option i would want it to be passed to view one.

this is what i tried

view 1 ts

public selectedOption:string;

view 1 html

<template>
<require from="../../Options/Options"></require>

<options selected-option.bind="optionTypes.selectedOption" view-model.ref="OptionTypes"></options>
</template>

view 2 that i am loading in view 1 ts

    export class optionTypes extends Component {
        
    
        @bindable selectedOption: string = '';
        sOptions = ["1", "2", "3"];

      async displayOption() {
        if (this.selectedOption == "1") {
            //gets the option selected
        }
    }

html

    <select md-select value.bind="selectedOption">
        <option value="">choose a  option</option>
        <option repeat.for="type of sOptions" value.bind="type">${type}</option>
    
    </select>
<a md-button="flat: true;" md-waves="color: accent;" class="modal-action btn-custom-width " click.delegate="displayOption()">proceed</a>

the select html loads correctly in the view one.The only issue is that its not returning the value that the user selected in the selectOption.how do i get the value from view 2 in view 1?

i tried this option also but the selectedOption in view 1 is always undefined