Currency Converter in AngularJS

index.html

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="invoice1.js"></script>

<div ng-app="invoice1" ng-controller="InvoiceController as invoice">

  <b>Invoice:</b>

  <div>
    Quantity: <input type="number" min="0" ng-model="invoice.qty" required ><br><br>
  </div>

  <div>
    Costs: <input type="number" min="0" ng-model="invoice.cost" required ><br><br>
    <select ng-model="invoice.inCurr">
      <option ng-repeat="c in invoice.currencies">{{c}}</option>
    </select>
  </div>

  <div>
    <b>Total:</b>
    <span ng-repeat="c in invoice.currencies">
      {{invoice.total(c) | currency:c}} &nbsp;&nbsp;&nbsp;
    </span>

    <button class="btn" ng-click="invoice.pay()">Pay</button>
  </div>
</div>


invoice1.js

angular.module('invoice1', [])
.controller('InvoiceController', function InvoiceController() {
  this.qty = 0;
  this.cost = 0;
  this.inCurr = 'USD';
  this.currencies = ['USD', 'EUR', 'CNY'];
  this.usdToForeignRates = {
    USD: 1,
    EUR: 0.74,
    CNY: 6.09
  };

  this.total = function total(outCurr) {
    return this.convertCurrency(this.qty * this.cost, this.inCurr, outCurr);
  };
  this.convertCurrency = function convertCurrency(amount, inCurr, outCurr) {
    return amount * this.usdToForeignRates[outCurr] / this.usdToForeignRates[inCurr];
  };
  this.pay = function pay() {
    window.alert('Thanks!');
  };
});


Output: