Struggling with implementing two-way binding for SELECT elements. Attempting to dynamically change the selected element through code. While I've come across examples on Stackoverflow for binding the change event for SELECT, finding resources on the application code changing the selected element has been scarce.
Although some solutions involve using ng-repeat on an OPTION element, I haven't had much success making it work and it doesn't seem aligned with the "Angular Way".
HTML Code:
<div ng-controller="SIController">
<select id="current-command" ng-model="currentCommand"
ng-options="c as c.label for c in availableCommands track by c.id"></select>
<button ng-click="changeSelectedOption()">Select "open"</button>
Controller Code:
var myApp = angular.module('myApp', []);
function SIController($scope) {
$scope.availableCommands = [
{id: 'edit', label: 'Edit'},
{id: 'open', label: 'Open'},
{id: 'close', label: 'Close'}
];
$scope.currentCommand = "close";
$scope.changeSelectedOption = function() {
$scope.currentCommand = 'open';
};
};
Despite confirming that $scope.currentCommand changes when the button is clicked, the OPTION element does not appear to be selected.