angular material - Adding $watchGroup for selectboxes using angularjs -

i have problem $watchgroup multiple selectboxes. have 2 select boxes want add $watchers.

i tried in following way not working watchers select boxes,

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> 

this how - codepen

i've encountered problems before passing object ng-model md-select $watch or $watchgroup (which doing), use $index.

markup

<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);     }             });