JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app>
    <div ng-controller="Controller">
        <div class="row" ng-repeat="item in items">
            <input type="radio" id="radio-{{$index}}" name="foo" ng-checked="item.checked" ng-focus="pickItem(item)">
                
            <label for="radio-{{$index}}">
                {{item.name}}:
                <span ng-if="!item.custom">{{item.value}}</span>
            </label>
            <input type="tel" ng-if="item.custom" ng-model="item.value" ng-focus="pickItem(item)">
                
            <label for="radio-{{$index}}">
                <span>x 10 = {{10 * item.value}}</span>
            </label>
        </div>
    </div>
</div>

CSS

.row {
    padding: 5px 0;
}

JavaScript

function Controller($scope) {
    $scope.items = [
        {name: 'one', value: 1, checked: true},
        {name: 'two', value: 2},
        {name: 'custom', value: 0, custom: true}
    ];
    
    $scope.pickItem = function (item) {
        $scope.items.forEach(function (i) {
            i.checked = i === item;
        });
    }
}