Assign value to ng-model via radio button - angularjs

Question

I'm new to Angular JS so mind my mistakes. I am trying to assign a value to an ng-model through dynamically created radio buttons. So far, this is what I have:
<div data-ng-init="radio=['Core','Software Development','Systsmes Analysis','All']">
<div data-ng-repeat="r in radio">
<div class="form-check">
<input class="form-check-input" type="radio" data-ng-model="types" data-ng-value="types='{{r}}'" name="type" id="{{r}}">
<label class="form-check-label" for="{{r}}">
{{r}}
</label>
</div>
</div>
<p>You chose {{types}}</p>
</div>
I am able to output the radio buttons as seen here:
But I am unable to output the selected radio buttons value.
What I want achieve is something like this:
Where the selected radio button's value pop's up in "You have chosen x".
Any help is much appreciated. Thank you for reading.

Answer 1

You need to use an object with dot notation:
angular.module("myApp", [])
.controller("myCtrl", function($scope) {
$scope.radio = { type: '' }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-init="radio=['Core','Software Development','Systems Analysis','All']">
<div ng-repeat="r in radio">
<div class="form-check">
<input class="form-check-input" id="{{r}}" type="radio" ng-model="radio.type" ng-value="'{{r}}'" name="type">
<label class="form-check-label" for="{{r}}">{{r}}</label>
</div>
</div>
<p>You chose {{radio.type}}</p>
</div>
</div>