<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="angular.js@1.5.3" data-semver="1.5.3" rel="stylesheet" href="Bootstrap" />
<script data-require="angular.js@1.5.3" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<a href="https://stackoverflow.com/questions/38121515/how-to-display-the-checked-radio-button-value-in-angularjs/38123098#38123098" target="_blank">Stack overflow question</a>
<form>
<div ng-controller="QuestionDisplayController">
<div ng-repeat="q in questionsData" style="border:groove 1px green">
<h4 style="color: darkmagenta">{{q.QText}}</h4>
<p ng-repeat="a in q.answer1" style="color: cadetblue">
<input type="radio" name="answers+{{$parent.$index}}" ng-model="q.selectedAns" value="{{a.option1}}" />{{a.option1}}</p>
<div ng-show="q.selectedAns">your answer is :{{q.selectedAns}}</div>
</div>
</div>
</form>
</body>
</html>
// Code goes here
var app = angular.module('myApp', []);
app.controller('QuestionDisplayController', function($scope) {
$scope.questionsData = [
{
QText: 'question 1',
answer1: [
{option1: 'q1-option-1'},
{option1: 'q1-option-2'},
{option1: 'q1-option-3'},
{option1: 'q1-option-4'}
]
},
{
QText: 'question 2',
answer1: [
{option1: 'q2-option-1'},
{option1: 'q2-option-2'},
{option1: 'q2-option-3'},
{option1: 'q2-option-4'}
]
}
];
});
/* Styles go here */