javascript - AngularJS - Trouble with $watch -

i trying remove "red" , "blue" drop down list options on product sku, if user member of "high" group on store site. code came below, partially works; thing works window alert. now, if remove logic looking user's group, work, user has set value of color drop down begin with.

function speccontroller($scope) {     angular.foreach($scope.user.groups, function (g) {         if (g.name == "high") {             alert('you in correct group!');             $scope.$watch('user.groups.name', function (val) {                 if (!val) return;                 if (val == "high") {                     $scope.variant.specs.color.options = $scope.variant.specs.color.options.filter(function (item) {                         return item.value !== 'red' && item.value !== 'blue';                     });                 }             });         }     }); } 

your goal put watch on groupname lies inside each group of groups object. current watcher pointing user.groups.name doesn't exist actually. if want make current code working take use on index while putting $watch

code

function speccontroller($scope) {     angular.foreach($scope.user.groups, function (g,index) { //added index param here         if (g.name == "high") {             alert('you in correct group!');             //used index param here put watch on each group.             $scope.$watch('user.groups['+ index + '].name', function (val) {                  if (!val) return;                 if (val == "high") {                     $scope.variant.specs.color.options = $scope.variant.specs.color.options.filter(function (item) {                         return item.value !== 'red' && item.value !== 'blue';                     });                 }             });         }     }); } 

note

this solution mess when have more 1000 groups in user.groups, watcher number increased , resultant app work slowly.