Добавление $watchGroup для полей выбора с помощью angularjs

Question

У меня проблема с $watchGroup для нескольких ящиков выбора. У меня есть два поля выбора, которые я хочу добавить $watchers.

Я пытался следующим образом, но не работает наблюдателей для полей выбора,

controller.js

          $scope.authorization = '';
          $scope.authentication = '';
          $scope.authorizationmodel = '';
          $scope.authenticationmodel = '';

          $scope.authenticationObj = [
            {id: 1, authtype: 'Authentication' },
            {id: 2, authtype: 'e-KYC' }           
          ];
          $scope.authorizationObj = [
              {id: 1, authtype: 'Best Finger Detection' },
              {id: 2, authtype: 'One Time Password' }           
          ];

          $scope.$watchGroup(['authorizationmodel', 'authenticationmodel'], function(newValues, oldValues, scope) {                 
            console.log(newValues[0]+'--'+newValues[1]);
            if(newValues[0].id !== undefined && newValues[1].id !== undefined){         
              $scope.authorization = newValues[0].id;
              $scope.authentication = newValues[1].id;
            }            
          });

application.html

<md-card flex="flex">
            <md-card-content>
                <md-input-container class="md-block" flex-gt-sm>
                    <label>Type of service</label>
                    <md-select ng-model="authenticationmodel">
                        <md-option ng-value="auth" ng-repeat="auth in authenticationObj">
                            {{auth.authtype}}
                        </md-option>
                    </md-select>
                </md-input-container>
                <md-input-container class="md-block" flex-gt-sm>
                    <label>Authorization via</label>
                    <md-select ng-model="authorizationmodel">
                        <md-option ng-value="auth1" ng-repeat="auth1 in authorizationObj">
                            {{auth1.authtype}}
                        </md-option>
                    </md-select> 
                </md-input-container>  
            </md-card-content>
        </md-card>

Answer 1

Вот как бы я это сделал - CodePen

Я столкнулся с проблемами перед передачей объекта ng-model за md-select $watch или $watchGroup (что вы и делаете), поэтому я использую $index.

наценка

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
  <md-card flex="flex">
    <md-card-content>
      <md-input-container class="md-block" flex-gt-sm>
        <label>Type of service</label>
        <md-select ng-model="authenticationIndex">
          <md-option ng-value="$index" ng-repeat="auth in authenticationObj">
            {{auth.authtype}}
          </md-option>
        </md-select>
      </md-input-container>
      <md-input-container class="md-block" flex-gt-sm>
        <label>Authorization via</label>
        <md-select ng-model="authorizationIndex">
          <md-option ng-value="$index" ng-repeat="auth1 in authorizationObj">
            {{auth1.authtype}}
          </md-option>
        </md-select> 
      </md-input-container>  
    </md-card-content>
  </md-card>
  Authorization: {{authorization}}, Authentication: {{authentication}}
</div>

JS

$scope.$watchGroup(['authenticationIndex', 'authorizationIndex'], function() {
    if (angular.isDefined($scope.authenticationIndex) && angular.isDefined($scope.authorizationIndex)) {         
       console.log($scope.authenticationObj[$scope.authenticationIndex], $scope.authorizationObj[$scope.authorizationIndex]);

       $scope.authorization = $scope.authenticationObj[$scope.authenticationIndex].id;
       $scope.authentication = $scope.authorizationObj[$scope.authorizationIndex].id;

       console.log($scope.authorization, $scope.authentication);
    }            
});