JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div ng-app="myApp">
<form ng-submit="submitForm()" ng-controller="myController">
<div ng-repeat="option in options">
<input type="radio" name="option" ng-value="option.id" ng-model="selected.option">
<label for="radio">{{option.name}}</label>
</div>
<h2>{{selected.option}}</h2>
<h2>{{submitCalled}}</h2>
<input type="submit" id="submit" value="Submit" />
</form>
</div>
JavaScript
angular.module('myApp', [])
.controller('myController', ['$scope', function($scope) {
$scope.selectedoption = "";
$scope.submitCalled = "";
$scope.selected = { option: '' }
$scope.options=[];
$scope.options[0]={id: "option1", name: "option 1"}
$scope.options[1]={id: "option2", name: "option 2"}
$scope.options[2]={id: "option3", name: "option 3"}
$scope.options[3]={id: "option4", name: "option 4"}
$scope.submitForm = function() {
console.log($scope.selected.option);
$scope.submitCalled = "submit called " + $scope.selected.option;
};
}]);