<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.text" />
  </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.text" />
  </div>
</div>
var app = angular.module("app", []);
app.controller('ca', CtrlA);
app.controller('cb', CtrlB);
app.factory('translator', Translator);

function TranslatingController(Translator) {
  this.text = "";
  this._Translator = Translator;
}
TranslatingController.prototype.translate = function(num) {
  this.text = this._Translator.translate(num);
}

CtrlA.$inject = ['translator'];
function CtrlA(Translator) {
  TranslatingController.call(this, Translator);
  var vm = this;
  vm.num = 1;  
}
CtrlA.prototype = Object.create(TranslatingController.prototype);

CtrlB.$inject = ['translator'];
function CtrlB(Translator) {
  TranslatingController.call(this, Translator);
  var vm = this;
  vm.num = 1;
}
CtrlB.prototype = Object.create(TranslatingController.prototype);

function Translator() {
  
  return {
    translate: translate
  };
  
  
  function translate(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;
    }    
    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