JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.0/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.0/angular-material.js"></script>
<body ng-app="inputAsCustomRadio">
    <div ng-controller="AppCtrl as ctrl">
         <h3>Items per page</h3>
You selected {{ctrl.perPage}}
        <md-radio-group ng-model="ctrl.perPage">
            <div ng-repeat="option in ctrl.perPageData">
                <md-radio-button ng-if="!option.input" value="{{option.value}}" class="md-primary">{{option.label}}</md-radio-button>
                <md-radio-button ng-if="option.input" value="{{ctrl.perPageCustom}}" class="md-primary">
                    <input ng-model="ctrl.perPageCustom" /> (Custom)</md-radio-button>
            </div>
        </md-radio-group>
        <md-button class="md-raised" ng-click="ctrl.show()">Show</md-button>
    </div>
</body>

CSS

body {
    margin: 30px;
}
input {
    width: 50px;
}

JavaScript

var app = angular.module('inputAsCustomRadio', ['ngMaterial', ]);
app.controller('AppCtrl', function ($scope) {
    this.perPage = 20;
    this.perPageCustom = 25;
    this.perPageData = [{
        label: '10',
        value: 10
    }, {
        label: '20',
        value: 20
    }, {
        label: 'All',
        value: 'ALL'
    }, {
        label: '' + this.perPageCustom,
        value: this.perPageCustom,
        input: true,
    }, ];

    this.show = function () {
        alert('You selected: ' + this.perPage);
    };
});