Using NG-repeat to make a form with mutiple radio buttons: want to reset the value of all the radio buttons

Question

I've got an issue with Angular; I have mutiple actors and every actor renders a radiobox form with 3 options: victim, causer and both.

Relevant template:

        <div class="actor" ng-repeat="activeActor in activeActors">                                                 
          <p class="category">{{activeActor}}</p>
          <form name="radioButtonForm">
            <div class="causerRadioForm">
              <input type="radio" name="causerRadio" value="victum" ng-model="defaultRadioButton" ng-click="setActorCauser(activeActor, 'victum')">
            </div>

            <div class="causerRadioForm">
              <input type="radio" name="causerRadio"  value="causer" ng-model="defaultRadioButton" ng-click="setActorCauser(activeActor, 'causer')">
            </div>

            <div class="causerRadioForm">
              <input type="radio"  name="causerRadio" value="both" ng-model="defaultRadioButton" ng-click="setActorCauser(activeActor, 'both')">
            </div>

          </form>

        </div>

This works fine however I have a button where if I click on it multiple actors (called fastActors) get rendered and have a default value of victum.

The problem is when I select a single actor and for example put it to causer and then click on fastActors, the radio box stays on causer while the radio button should reset to victum.

Relevant JS

$scope.toggleFastTraffic = function(actor){
  //erase all actors 
  $scope.actors = [];
  $scope.report.traffic_players = [];
  //default value for radio boxes
  $scope.defaultRadioButton = "victum";


  $scope.SlowTraffic = false;
  $scope.FastTraffic = true;
  $scope.formOptionsExpanded = true;
  $scope.activeActors = [];

  var i = $scope.activeActors.indexOf(actor);
  console.log($scope.activeActors.indexOf(actor));
  if ($scope.counter === -1){

   //do more here
}

Basically the moment I press toggleFastActor I wish to make all radio buttons victum.

Friendly greetings, T

P.S. I am aware of the victum typo I am under orders to keep that tho :P

Here's a quick codepen, it's not done yet but it does contain the bug: if you press on car and make it a causer, and then toggle fast traffic the car goes to victim in the report (which is good) but the radio buttons don't change.

P.s the codepen has some other bugs too no need to pay attention to those.

http://codepen.io/CMD-Thomas/pen/yNbNaZ?editors=101

Answer 1

This happens because the ng-model value is same. Once you set the value of 'defaultRadioButton' to 'causer' it will remain causer for all. Remember MVVM pattern