<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css" />
  <script data-require="angular.js@1.4.0-beta.5" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="app">





  <div class="row panel" ng-controller="ctrl">

    <h4>Dollar to Gold Converter 
        <small class="right">Gold Selling Rate: 
          <span class="label info"><b>{{rate | currency}} / oz.</b></span>
        </small>
      </h4>
    <hr>

    <!-- Dollar input -->
    <label class="small-6 columns">Dollar $:
      <input type="number" ng-model="goldAmount" ng-change="update('oz')">
    </label>

    <!-- Ounces input -->
    <label class="small-6 columns">Ounces (oz):
      <input type="number" ng-model="oz" ng-change="update('goldAmount')">
    </label>


    <br>
    <br>
    <br>
    <br>
    <br>
    <hr>
    <br>


    <p>Dollars: <b>{{ goldAmount | currency }}</b></p>
    <p>Ounces: <b>{{ oz | number:4 }} oz</b></p>

  </div>




</body>

</html>

// Code goes here

var app = angular.module('app', []);

app.controller('ctrl', ['$scope', function($scope) {
    $scope.goldAmount = 0;
    $scope.oz = 0;
    $scope.rate = 1267;
    
    $scope.update = function(attr) {
        if (attr == 'oz') {
            $scope[attr] = $scope.goldAmount / $scope.rate;
        } else {
            $scope[attr] = $scope.oz * $scope.rate;
        }
    };
    
  
}]);
/* Styles go here */