<!DOCTYPE html>
<html>

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script src="currencyCtrl.js"></script>
    <script src="financeSrv.js"></script>
  </head>

  <body ng-app="currency" ng-controller="currencyController as ctrl">
    <div>
      <h1>Currency Converter test</h1>
      Amount: <input type="number" min="0" ng-model="ctrl.amount" />
      <select ng-model="ctrl.inCurrency">
        <option ng-repeat="currency in ctrl.currencies">{{currency}}</option>
      </select>
      <br>
      <b>Total:</b>
      <select ng-model="ctrl.outCurrency">
        <option ng-repeat="currency in ctrl.currencies">{{currency}}</option>
      </select>
      <br>
      <span>{{ctrl.convert()}}</span>
      <!--<br>
      <button class="btn" ng-click="ctrl.pay()">Pay</button>-->
    </div>
  </body>

</html>
angular.module('financeSrv', [])
.factory('currencyConverter', function() {
  
  var currencies = ['USD', 'ARS', 'CLP'];
  var usdToOtherRates = {
    USD: 1,
    ARS: 14.94,
    CLP: 651.76
  }
  
  var convert = function(amount, inCurr, outCurr) {
    return amount * usdToOtherRates[outCurr] / usdToOtherRates[inCurr];
  }
  
  return {
    currencies: currencies,
    convert: convert
  }
});
angular.module('currency', ['financeSrv'])
  .controller('currencyController', ['currencyConverter', function(currencyConverter) {
    this.amount = 1;
    this.inCurrency = 'USD';
    this.outCurrency = 'ARS';
    this.currencies = currencyConverter.currencies;
    
    this.convert = function convert() {
      return currencyConverter.convert(this.amount, this.inCurrency, this.outCurrency);
    }
    
    this.pay = function pay() {
      alert('Thanks!');
    }
  }]);