how do i select all multiple values in an md select box

i have a multiselect box using aurelia. it returns all the items that was selected as follows in ts

public selectedColumns: any = [];
    tableColumns = [            
            { id: 3, name: "First Name" },
            { id: 4, name: "Middle Name" },
            { id: 5, name: "Surname" },
               
        ]

html

<select multiple md-select value.bind="selectedColumns">
    <option value="" disabled selected></option>
    <option repeat.for="columns of tableColumns" value.bind="columns.id">${columns.name}</option>
</select>
<a md-button click.delegate="getcolumns(selectedColumns)">get</a>

so when i click the button the selectedColumns value passes me all the ids that was selected in an array.

now i am trying to have all the items selected first on the select box and then uncheck the selected options

like

i tried setting the following

<select multiple md-select value.bind="selectedColumns">
        <option value="" disabled selected></option>
        <option repeat.for="columns of tableColumns" value.bind="columns.id" selected>${columns.name}</option>
    </select>

but nothing gets checked it remains unchecked until the user clicks it.

i also tried creating checkboxes in a dropdown as follows:

<div class="col">
                    <a md-button md-dropdown="activates: dropdown1; close-on-click: false;">drop me!</a>
                    <ul id="dropdown1" value.bind="selectedColumn">
                        <li repeat.for="columns of tableColumns" value.bind="columns.id"><md-checkbox checked.bind="true" > ${columns.name}</md-checkbox> </li>
                        
                    </ul>
                </div>

this checks all the boxes at first but when a user unchecks it then i get an error "Binding expression "true" cannot be assigned." and when i click on the button no values get passed to selectedColumns

how can i solve this?