JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.2.13/angular.min.js"></script>
<div ng-app="test">
    <div ng-controller="MyController as ctrl">
        <input ng-model="ctrl.letter" />
        <input type="number" ng-model="ctrl.number" />
    </div>
</div>

JavaScript

myController = function ($scope) {
    this.map = {
        'A': 1,
        'B': 2,
        'C': 3,
        'D': 4
    };
    $scope._letter = 'A';
    $scope._number = 1;
};

myController.prototype.getLetterValue = function (num) {
    for (var key in this.map) {
        if (this.map.hasOwnProperty(key)) {
            if (this.map[key] === num) {
                return key;
            }
        }
    }
};

myController.prototype.getNumberValue = function (letter) {
    return this.map[letter];
};

Object.defineProperty(
myController.prototype,uyb
    "letter", {
    get: function () {
        return this._letter;
    },
    set: function (newValue) {
        this._letter = newValue;
        this._number = this.getNumberValue(this._letter);
    },
    enumerable: true,
    configurable: true
});

Object.defineProperty(
myController.prototype,
    "number", {
    get: function () {
        return this._number;
    },
    set: function (newValue) {
        this._number = newValue;
        this._letter = this.getLetterValue(this._number);
    },
    enumerable: true,
    configurable: true
});

angular.module("test", [])
    .controller("MyController", myController);