<!DOCTYPE html>
<html ng-app ="autoPopulateModule">
<head>
<script data-require="angular.js@1.3.17" data-semver="1.3.17" src="https://code.angularjs.org/1.3.17/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="autoPopulateCtrl">
<h1>After form reset, radio button with default value</h1>
<form name="rbForm">
Name: <input type= "text" name = "name" id = "name" ng-model="name"/>
<div>
<br/>
Male <input type= "radio" name = "gender" id = "gender" ng-model="gender" value="Yes"/>
Female <input type= "radio" name = "gender" id = "gender" ng-model="gender" value="No"/>
</div>
<div><br/>
<!-- Make sure your from reset button type should be button-->
<input type = "button" ng-click="resetForm()" value = "Reset"/>
</div>
</form>
</body>
</html>
// Code goes here
var autoPopulateModule = angular.module('autoPopulateModule', []);
autoPopulateModule.controller('autoPopulateCtrl', ['$scope', function ($scope) {
$scope.gender="Yes";
$scope.resetForm = function () {
//Here rbForm is the form name given in index.html
rbForm.reset();
$scope.rbForm.$setPristine();
$scope.rbForm.$setUntouched();
// here "gen" is the name given to the radio button group and try to apply the default value.
rbForm.gender.value="Yes";
$scope.gender = "Yes";
console.log('gender: '+$scope.gender);
}
}]);
/* Styles go here */