I am trying to change the value of a select element on a 3rd party website using a chrome extension, plain vanilla javascript. I cannot change the HTML on the website.

From what I can tell, the select element is controlled with ng-model. I can't seem to get this to update!!

I can successfully update the view of the website, and the select menu updates. However when I click submit, the changes to the select menu do not register. I have tried to dispatch the event, but it didn't work. Here's my code:

// Select Number of Players
function selectPlayers(numPlayers) {
  num = numPlayers - 1;
  const sel = document.getElementById('pc');
  sel.selectedIndex = num;
  sel.dispatchEvent(new Event('sel', {'bubbles': true, 'cancelable': false }));
}

here's the website for reference: https://cityofla.ezlinksgolf.com/index.html#/preSearch

Here's the inspected SELECT element:

<select id="pc" class="preSearch-select-player ng-pristine ng-untouched ng-valid" ng-model="ec.selectedPlayer" ng-change="ec.onPlayerCountChanged(ec.selectedPlayer)" ng-options="player as player for player in ec.filterPlayers" title="Enter Players"><option label="1" value="string:1">1</option><option label="2" value="string:2">2</option><option label="3" value="string:3">3</option><option label="4" value="string:4" selected="selected">4</option><option label="5" value="string:5">5</option></select>

Thanks for looking!