<!DOCTYPE html>
<html ng-app>

  <head>
    <script data-require="angular.js@1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>AngularJS calculator</h1>
    <div ng-controller="CalculatorCtrl">
      <table>
        <tr>
          <td>a =</td>
          <td><input ng-model="a"></td>
          <td>
            <button class="command" ng-click="inca()">+1</button>
            <button class="command" ng-click="deca()">-1</button>
          </td>
        </tr>
        <tr>
          <td>b =</td>
          <td><input ng-model="b"></td>
          <td>
            <button class="command" ng-click="incb()">+1</button>
            <button class="command" ng-click="decb()">-1</button>
          </td>
        </tr>
        <tr>
          <td>operation:</td>
          <td>
            <select ng-model="operation">
              <option value="+">+</option>
              <option value="-">-</option>
              <option value="*">*</option>
              <option value="/">/</option>
            </select>
          </td>
        </tr>
      </table>
      <b class="result">{{na()}} {{operation}} {{nb()}} = {{calculate()}}</b>
    </div>
  </body>

</html>
// Code goes here

function CalculatorCtrl($scope) {
  
  $scope.a = 0;
  $scope.b = 0;
  $scope.operation = '+';
  
  $scope.na = function() {
    return $scope.a - 0;
  }
  
  $scope.nb = function() {
    return $scope.b - 0;
  }
  
  $scope.inca = function() {
    $scope.a = $scope.na() + 1;
  }
  
  $scope.incb = function() {
    $scope.b = $scope.nb() + 1;
  }
  
  $scope.deca = function() {
    $scope.a = $scope.na() - 1;
  }
  
  $scope.decb = function() {
    $scope.b = $scope.nb() - 1;
  }
  
  $scope.calculate = function() {
    if($scope.operation == '+') {
      return $scope.na() + $scope.nb();
    }
    if($scope.operation == '-') {
      return $scope.a - $scope.b;
    }
    if($scope.operation == '*') {
      return $scope.a * $scope.b;
    }
    if($scope.operation == '/') {
      return $scope.a / $scope.b;
    }
    return "undef";
  }
}
/* Styles go here */

.result {
  color: #38F;
  font-size: 36px;
}

.command {
	cursor: pointer;
	color: #00B;
  font-size: 13px;
  font-weight: bold;
}