get radio button selected value of form in controller angularjs

Question

I'm trying to echo the radio buttons selected value by using document.write (only for as of now).. So it's actually creating a problem with the code

JavaScript Code:

$scope.Next = function(){
    var queid = $scope.id1;
    var ans = $scope.radio;
    document.write(queid);
    document.write(ans);
}

HTML Code:

<form style="text-align:left;width:90%;margin-left:10px;" ng-controller="dropdownCtrl">
  <div class="tab" ng-repeat="e in disp">
    <p>{{e.question}}</p>
    <input type="hidden" ng-model="id1"  ng-init="id1=e.id" name="id1" ng-value="{{e.id}}" />

<label class="container2">Option A : {{e.option_a}}
<input type="radio" checked="checked" ng-model="radio" name="radio1" ng-value='"option_a"'>
<span class="checkmark"></span></label>

<label class="container2">Option B : {{e.option_b}}
<input type="radio" ng-model="radio" name="radio1" ng-value='"option_b"'>
<span class="checkmark"></span></label>

<label class="container2">Option C : {{e.option_c}}
<input type="radio" ng-model="radio" name="radio1" ng-value='"option_c"'>
<span class="checkmark"></span></label>

<label class="container2">Option D : {{e.option_d}}
<input type="radio" ng-model="radio" name="radio1" ng-value='"option_d"'>
<span class="checkmark"></span></label>
  </div>

<div style="overflow:auto;">
<div style="float:right;">
<button type="button" ng-click="Next()" style="background:#acddde;color:black;border-radius:3px;border:none;width:80px;height:30px;">Next</button>
</div>
</div>
</form>

Answer 1

The only change made which is working that is to put ng-repeat in form ... Because it also then includes the button. So we can take ng-repeat in the form or else take a div which covers the whole form content inside from the first input to the last button, and add ng-repeat to that div.

JavaScript Code:

$scope.Next = function(){
    var queid = $scope.id1;
    var ans = $scope.radio;
    document.write(queid);
    document.write(ans);
}

Html Code:

<form style="text-align:left;width:90%;margin-left:10px;" ng-controller="dropdownCtrl" class="tab" ng-repeat="e in disp">
    <p>{{e.question}}</p>
    <input type="hidden" ng-model="id1"  ng-init="id1=e.id" name="id1" ng-value="{{e.id}}" />

<label class="container2">Option A : {{e.option_a}}
<input type="radio" checked="checked" ng-model="radio" name="radio1" ng-value='"option_a"'>
<span class="checkmark"></span></label>

<label class="container2">Option B : {{e.option_b}}
<input type="radio" ng-model="radio" name="radio1" ng-value='"option_b"'>
<span class="checkmark"></span></label>

<label class="container2">Option C : {{e.option_c}}
<input type="radio" ng-model="radio" name="radio1" ng-value='"option_c"'>
<span class="checkmark"></span></label>

<label class="container2">Option D : {{e.option_d}}
<input type="radio" ng-model="radio" name="radio1" ng-value='"option_d"'>
<span class="checkmark"></span></label>

<div style="overflow:auto;">
<div style="float:right;">
<button type="button" ng-click="Next()" style="background:#acddde;color:black;border-radius:3px;border:none;width:80px;height:30px;">Next</button>
</div>
</div>
</form>