title: Clear Radio Button on ng-disabled
body: <p>Below is how I a implemented my code which I modified from <a href="https://stackoverflow.com/questions/47497259/ng-repeat-hiding-radio-button-based-on-other-radio-answers-selected/47498129#47498129">Ng-repeat hiding radio button based on other radio answers selected</a>. What I need help with is clearing the radio button when it is removed/disabled == true of that answer. </p>
  
  <p>If the user starts with Q3 and selects answer31 then goes back to Q1 and selects answer11, the question.selectedAnswer  still shows up as answer31. </p>
  
  <p>Any help is appreciated </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('plunker', []);
  
  
  app.controller('MainCtrl', ['$scope',
    function($scope) {
      
      function getAnswer(qid, aid) {
          var qs = $scope.questions, q;
          for (var i = 0; i &lt; qs.length; ++i) {
            if (qs[i].qid === qid) {
              q = qs[i];
              break;
            }
          }
          if (q) {
            var as = q.Answer;
            for (i = 0; as.length; ++i) {
              if (as[i].aId === aid) {
                return as[i];
              }
            }
          }
      }
      
      
      function doRemove(q, a) {
        if (a.removes &amp;&amp; a.removes.length) {
          for (var i = 0; i &lt; a.removes.length; ++i) {
            var r = a.removes[i],
                answer = getAnswer(r.qid, r.aId);
            if (answer) {
              answer.isDisabled = (q.selectedAnswer == a.answertxt);
            }
          }
        }
      }
      
      $scope.select = function (q, a) {
        var as = q.Answer;
        
        for (var i = 0; i &lt; as.length; ++i) {
          var answer = as[i];
          doRemove(q, answer);
        }
      };
  
      $scope.questions = [{
          questiontxt: 'Please select your Age range',
          qid: 1234,
          Answer: [{
            answertxt: "answer11",
            aId: 83493,
            hides: [{
              qid: 5678,
              aId: 67107
            }],
            removes: [{
              qid: 4321,
              aId: 32342
            }]
          }, {
            answertxt: "answer12",
            aId: 1223,
          }, {
            answertxt: "answer13",
            aId: 1223
          }]
        },
        {
          questiontxt: 'Please select your favorite activity',
          qid: 5678,
          Answer: [{
            answertxt: "answer21",
            aId: 90886
          }, {
            answertxt: "answer22",
            aId: 67107
          }]
        },
        {
          questiontxt: 'Please select your favorite food',
          qid: 4321,
          Answer: [{
            answertxt: "answer31",
            aId: 32342
          }, {
            answertxt: "answer32",
            aId: 79130
          }]
        }
      ];
    }
  ]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="plunker"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;AngularJS Plunker&lt;/title&gt;
    &lt;script&gt;
      document.write('&lt;base href="' + document.location + '" /&gt;');
    &lt;/script&gt;
    &lt;link rel="stylesheet" href="style.css" /&gt;
    &lt;script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"&gt;&lt;/script&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body ng-controller="MainCtrl"&gt;
    &lt;div ng-repeat="question in questions"&gt;
      &lt;div class="row"&gt;
        &lt;br/&gt;&lt;span&gt;Q{{$index+1}}. {{question.questiontxt}}&lt;/span&gt;
      &lt;/div&gt;
      &lt;div ng-repeat="answer in question.Answer"&gt;
        &lt;div ng-if="!answer.isDisabled"&gt;
          &lt;input type="radio"
            ng-change="select(question, answer)"
            ng-disabled="answer.isDisabled"
            ng-model="question.selectedAnswer" 
            ng-value="answer.answertxt" /&gt;
            &lt;span&gt;{{answer.answertxt}}&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>update</strong></p>
  
  <p>I want to make sure my intent is clear.  </p>
  
  <p>If the user starts on Q1 and selects "answer11" in Q1 you can see that in Q3 "answer31" disappears. Making it not possible for the user to select "answer31" </p>
  
  <p>But if the user starts on Q3 and selects "answer31" in Q3, the answer is still selected even though the user selects "answer11" in Q1 (which makes the answer disappear). In the backend "answer31" is still selected. </p>
  
  <p>Please let me know if this makes sense. Looking at the one of the answers received, the solution might be to hide Q3 until a selection is made in Q1. Which might be a different question. </p>