Angular Material Radio Button model not updating

Question

I am using an Angular Material radio group with an ng-repeat but for the life of me I cannot get the ng-model to update with selection. This is my current implementation but I have also tried ng-model="$parent.effectSelected"

Further down in the code I have a function when the user clicks a button and I use the value of the select for evaluation of next steps, but it is always logging as 'one', which I what I set it initially.

My HTML:

<md-radio-group ng-model="effectSelected" class="effect-radio-group">
  <md-radio-button class="effect-btn" ng-repeat="effect in effects" ng-value="effect.value">{{effect.name}}</md-radio-button>
</md-radio-group>

<md-button ng-click="checkSelection()">Evaluate</md-button>

My Controller JS:

   $scope.effects = [{'name':'None', 'value': 'one'},{'name':'Maybe', 'value': 'two'},{'name':'Yes', 'value': 'three'}];
   $scope.effectSelected = $scope.effects[0].value;
   $scope.checkSelection = function () {
       console.log($scope.effectSelected);
   }

Answer 1

Well, the problem its because u not encapsulate radio in a object. To work your code need do something like this:

My HTML:

<md-radio-group ng-model="effectSelected.selected" class="effect-radio-group">
  <md-radio-button class="effect-btn" ng-repeat="effect in effects" ng-value="effect.value">{{effect.name}}</md-radio-button>
</md-radio-group>

<md-button ng-click="checkSelection()">Evaluate</md-button>

My Controller JS:

   $scope.effects = [{'name':'None', 'value': 'one'},{'name':'Maybe', 'value': 'two'},{'name':'Yes', 'value': 'three'}];
   $scope.effectSelected = { selected:'one'}
   $scope.checkSelection() = function () {
       console.log($scope.effectSelected.selected);
   }

Hope this help you ;D