<div ng-app="app">
  <div ng-controller="ca as vm">
    <input type="number" min="1" max="9" ng-model="vm.num" ng-change="vm.translate( vm.num)" />
    <p ng-bind="vm.words[0]" />
  </div>
  
  <div ng-controller="cb as vm">
    <input type="number" min="1" max="9" ng-model="vm.num" ng-change="vm.translate( vm.num)" />
    <p ng-bind="vm.words[1]" />
  </div>
</div>
var app = angular.module("app", []);
app.controller('ca', CtrlA);
app.controller('cb', CtrlB);
app.factory('translator', Translator);

CtrlA.$inject = ['translator'];
function CtrlA(Translator) {
  var vm = this;
  vm.words = Translator.words;
  vm.num = 1;
  vm.translate = Translator.translate.bind(Translator, 0);
}

CtrlB.$inject = ['translator'];
function CtrlB(Translator) {
  var vm = this;
  vm.num = 1;
  vm.words = Translator.words;
  vm.translate = Translator.translate.bind(Translator, 1);
}

function Translator() {
  var words = ['', ''];
  
  return {
    words: words,
    translate: translate
  };
  
  function translate(index, num) {
    var res;
    switch(num) {
      case 0: res = "Zero"; break;
      case 1: res = "One"; break;
      case 2: res = "Two"; break;
      case 3: res = "Three"; break;
      case 4: res = "Four"; break;
      case 5: res = "Five"; break;
      case 6: res = "Six"; break;
      case 7: res = "Seven"; break;
      case 8: res = "Eight"; break;
      case 9: res = "Nine"; break;
      default: res = String(num); break;
    }    
    words[index] = res;
    return res;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js