How to change value in a select with ng-options by code?

Question

I'm working on a project with angularjs, in which I have three DDLs on a page (HTML), created by "select" using "ng-options", once I selected the three DDLs, when I selected the first DDL, I put in an initial state the other two (select an option), but it does not happen as they remain with the selected value or blank.

On the side of the controllers in .js, in the variable that is linked to each of the ng-model of the ddl, they set the default object ($ scope.selectedActive= $ scope.default_option;), but it does not work

When you change each of the ddls, I see that class ng-dirty and ng-valid class (class = "molecule_list ng-valid ng-dirty") I think that there goes the problem.

This is the code in the HTML

 <select id="ddl_actives" name="ddl_actives" ng-model="selectedActive" class="molecule_list" style="width:180px;" ng-options="active.text for active in Actives_list | orderBy: 'text'" ng-change="Select_molecule(selectedActive)"></select>
 <select id="ddl_submission" name="ddl_submission" class="molecule_list" ng-model="selectedsubmission" ng-options="event.text for event in submissionEvent_list track by event.value" ng-change="Select_submission(selectedsubmission)"></select>
 <select id="ddl_authority" name="ddl_authority" class="molecule_list" ng-model="selectedauthority" ng-options="authority.text for authority in authority_list | orderBy: 'text'" ng-change="OpenMenu_Authority(selectedauthority)"></select>

this is the code in the .js How id load each DDL

$scope.loadActives = function () {
var dow_user_id = Cookies.get('username');
EndpointsService.GetList_Actives.query({ dow_user_id: dow_user_id }, {}).$promise.then(function (data) {
    $scope.Actives_list = data;
    //SCP-513
    $scope.Actives_list.unshift($scope.default_option);
    $scope.selectedActive = $scope.default_option;
}, function (error) {
    if (error.data.Message != undefined)
        alert(error.data.Message + '\n' + 'Detail: ' + error.data.ExceptionMessage);
    else
        alert('An error has occurred while loading the Actives list\nDetail: at service "GetList_Actives"');
});

};

This is an example of the code I use to reset value in the ng-model of the ddl.

$scope.Select_molecule = function (selectedActives) {
    $scope.selectedActive = $scope.default_option;
    $scope.selectedauthority = $scope.default_option;
};

my expectation is that when selecting the first ddl the other two show the option of (Select an option)

Answer 1

The default option cannot be selected in other dropdowns if it doesn't exist as an option to be selected, i've taken your code and made some adjustments to it.

Here is it :

HTML :

<select id="ddl_actives" name="ddl_actives" ng-model="selectedActive" class="molecule_list" style="width:180px;" ng-options="active.text for active in Actives_list | orderBy: 'text'" ng-change="Select_molecule(selectedActive)"></select>        

<select id="ddl_submission" name="ddl_submission" class="molecule_list" ng-model="selectedsubmission" ng-options="event.text for event in submissionEvent_list" ng-change="Select_submission(selectedsubmission)"></select>

<select id="ddl_authority" name="ddl_authority" class="molecule_list" ng-model="selectedauthority" ng-options="authority.text for authority in authority_list | orderBy: 'text'" ng-change="OpenMenu_Authority(selectedauthority)"></select>

Controller :

$scope.submissionEvent_list = [];
   $scope.authority_list = [];
   $scope.loadActives = function () {
      $scope.default_option = {
       text: 'default'
      };

     $scope.Actives_list = [
      {
        text: 'test',
        value: 'a value'
      },
      {
        text: 'test2',
        value: 'another value'
      }
     ];
     $scope.submissionEvent_list.unshift($scope.default_option);
     $scope.authority_list.unshift($scope.default_option);
     $scope.Actives_list.unshift($scope.default_option);

     $scope.selectedActive = $scope.default_option;

   };

   $scope.loadActives();

   $scope.Select_molecule = function (selectedActives) {
      $scope.selectedsubmission = $scope.default_option;
      $scope.selectedauthority = $scope.default_option;
   };

Notice that the other dropdown are filled with the default option but it's not selected until the change is made in the first dropdown.

Hope this will help.