<!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 */