JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div ng-app="card">
    <div ng-controller="cardStat">
        <input type="number" min="1" max="" ng-model="display" ng-change="updateStat()" ng-value="display" />
        {{display}}
    </div>
</div>

JavaScript

var card = angular.module('card', []);

card.controller('cardStat', function ($scope) {
    $scope.letterMap = {
        10: "A",
        11: "B",
        12: "C"
    };
    $scope.stat = 1;
    $scope.display = 1;
    $scope.updateStat = function() {
        console.log(arguments);
        if ($scope.stat > 9) {
            $scope.display = $scope.letterMap[$scope.stat];
        } else {
            $scope.display = $scope.stat;
        }
    };
});