Copying and setting Radio Buttons using OnChange event

<div ng-app="my_app" ng-controller="my_ctrl">
<div class="container"><div class="row"><div class="col-3">
<input type=radio ng-model="class" value="One" ng-change="onChange()"> One 
<input type=radio ng-model="class" value="Two" ng-change="onChange()"> Two
<input type=radio ng-model="class" value="Three" ng-change="onChange()"> Three
</div><div class="col-3">
--- 2nd group -- 
</div><div class="col-6">
<input type=radio ng-model="class2" value="One" > First ( One )
<input type=radio ng-model="class2" value="Two"> Second ( Two )
<input type=radio ng-model="class2" value="Three"> Third ( Three )
</div>
</div></div>
<br>
Your selection is {{class}}
</div>
<div class='alert alert-primary' role='alert' id=d1>After selection details will appear here</div>
<script>
var app = angular.module('my_app', []);
app.controller('my_ctrl', function($scope) {
 $scope.onChange = function()
{ 
 $scope.class2=$scope.class;	
 document.getElementById('d1').innerHTML="Your Selection: " + $scope.class;
 
} 
    
});
</script>