For some reason that is too long to explain I am trying to modify the behaviour of a select multiple, what I want to achieve is to allow the user to select multiple elements without the need to hold the ctrl/cmd key. this is the html:

<select multiple="multiple" class="form-control">
    <option ng-repeat="option in options" ng-click="selectItem(option)" ng-selected="option.selected" value="{{option.id}}">{{option.name}}</option>
</select>

and this is my selectItem function:

$scope.selectItem = (option) => {
    let index = $scope.selectedElements.indexOf(option.id);
    (index === -1) ? $scope.selectedElements.push(option.id) : $scope.selectedElements.splice(index, 1);
    
    $scope.options.forEach((element, index) => {
        element.selected = $scope.selectedElements.indexOf(element.id) !== -1 ? true : false;
    });
}

this is partially working: the $scope.selectedElements array is updated and also the $scope.options has the selected property correctly set to true or false. However the select only shows as highlighted the last element I clicked on.

Am I missing something?