How to bind two or more md-radio-groups to derive result

Question

I'm relatively new to Angular JS and material.

1. We have a requirement where individual questions have radio buttons' groups as well as 'Agree-All' / 'Disagree-All'.
2. Whenever the user clicks on 'Agree-All', the individual radio buttons should turn into 'Agree' and same case for 'Disagree-All'
3. The user has the capability to choose individually from the list of questions.

How to achieve the functionality?

Note: We are using AngularJS.

<div layout="row">
    <div layout="row">
        <div layout="row">
            <md-radio-group layout="row" >
                <md-radio-button value="AgreeAll">Agree All</md-radio-button>
                <md-radio-button value="DisagreeAll">Disagree All</md-radio-button>
            </md-radio-group>
        </div>
        <div layout="row" class="padding-left-10">
            <span> Do you agree to all the questions?</span>
        </div>
    </div>
</div>
<div layout="row">
    <div layout="row">
        <div layout="row">
            <md-radio-group layout="row" >
                <md-radio-button value="Agree">Agree</md-radio-button>
                <md-radio-button value="Disagree">Disagree</md-radio-button>
            </md-radio-group>
        </div>
        <div layout="row" class="padding-left-10">
            <span> Do you agree to terms and conditions?</span>
        </div>
    </div>
</div>
<div layout="row">
  <div layout="row">
        <div layout="row">
            <md-radio-group layout="row" >
                <md-radio-button value="Agree">Agree</md-radio-button>
                <md-radio-button value="Disagree">Disagree</md-radio-button>
            </md-radio-group>
        </div>
        <div layout="row" class="padding-left-10">
            <span> Do you agree to company policies?</span>
        </div>
    </div>

</div>

Answer 1

You'll put an ng-model onto each radio group like the following:

<div layout="row">
    <div layout="row">
        <div layout="row">
            <md-radio-group ng-model="data.agreeAll" layout="row" ng-change="agreeAllorDisagreeAll()">
                <md-radio-button value="AgreeAll">Agree All</md-radio-button>
                <md-radio-button value="DisagreeAll">Disagree All</md-radio-button>
            </md-radio-group>
        </div>
        <div layout="row" class="padding-left-10">
            <span> Do you agree to all the questions?</span>
        </div>
    </div>
</div>
<div layout="row">
    <div layout="row">
        <div layout="row">
            <md-radio-group ng-model="data.group2" layout="row" >
                <md-radio-button value="Agree">Agree</md-radio-button>
                <md-radio-button value="Disagree">Disagree</md-radio-button>
            </md-radio-group>
        </div>
        <div layout="row" class="padding-left-10">
            <span> Do you agree to terms and conditions?</span>
        </div>
    </div>
</div>
<div layout="row">
  <div layout="row">
        <div layout="row">
            <md-radio-group ng-model="data.group3" layout="row" >
                <md-radio-button value="Agree">Agree</md-radio-button>
                <md-radio-button value="Disagree">Disagree</md-radio-button>
            </md-radio-group>
        </div>
        <div layout="row" class="padding-left-10">
            <span> Do you agree to company policies?</span>
        </div>
    </div>

</div>

Then in your controller make a function for that like this:

$scope.agreeAllOrDisagreeAll = function() { // Please name it something else... this name is terrible :)
    $scope.data.group2 = ($scope.data.agreeAll === 'AgreeAll') ? 'Agreee' : 'Disagree';
    $scope.data.group3 = ($scope.data.agreeAll === 'AgreeAll') ? 'Agreee' : 'Disagree';

}

There should probably be other logic in there as well, but that is up to you. This will get you what you want! Let me know if you have any other questions or if it doesn't work... Maybe I have a typo somewhere and I'll fix it!

Good Luck!

Edit: I would also add another function (Or more logic to the first one) to make it so that if they manually change groups 2 or 3, then it clears $scope.data.agreeAll