title: How to create a simple calculator using angularjs?
body: <p>I am able to do it with text-box and the dropdownlist but what i need is to  create a calculator using a text but i am  not able to enter the button values to the text-box</p>
  
  <p>Here is my index.html </p>
  
  <p>
      
      
        </p>
  
  <pre><code>  &lt;link data-require="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" /&gt;
    &lt;link href="style.css" rel="stylesheet" /&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;Simple Calculator&lt;/h1&gt;
  &lt;div ng-app="myApp"&gt;
      &lt;div ng-controller="calculatorCtrl"&gt;
  
   &lt;div class="offset4 span6 well"&gt;
   &lt;label&gt;Enter a value :&lt;/label&gt;
   &lt;input ng-model="firstNumber" type="text"&gt; &lt;br/&gt;&lt;br&gt;
  
  
   &lt;label&gt;Another Value:&lt;/label&gt;
   &lt;input ng-model="secondNumber" type="text"&gt; &lt;br/&gt;&lt;br&gt;
  
   &lt;label&gt;Operator:&lt;/label&gt;
   &lt;select ng-model="selectedOperator"
   ng-options="operator for operator in operators"&gt;&lt;/select&gt; 
   &lt;br&gt;&lt;br&gt;
              &lt;button ng-model="btn1" class="numberbutton" value="1" ng-click='updateOutput(1)'&gt;1&lt;/button&gt;
              &lt;button name="btn2" class="numberbutton" value="2" ng-click='updateOutput(2)'&gt;2&lt;/button&gt;
              &lt;button name="btn3" class="numberbutton" value="3" ng-click='updateOutput(3)'&gt;3&lt;/button&gt;
               &lt;button name="btn0" class="numberbutton" value="0" ng-click='updateOutput(0)'&gt;0&lt;/button&gt;
              &lt;br&gt;
  
              &lt;button name="btnPlus" class="operationbutton" ng-click='add()'&gt;+&lt;/button&gt;
               &lt;button name="btnMinus" class="operationbutton" ng-click='subtract()'&gt;-&lt;/button&gt;
               &lt;button name="btnEquals" class="operationbutton" ng-click='calculate()'&gt;=&lt;/button&gt;
   &lt;button ng-click="calculate()"&gt;Calculate&lt;/button&gt; &lt;br&gt;&lt;br&gt;
  
   Result: {{result}}
   &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And my here is my js file:</p>
  
  <p>script.js</p>
  
  <pre><code>var myApp = angular.module('myApp', []);
  
   myApp.controller('calculatorCtrl',function ($scope) {  
  
  
  $scope.operators = ['+', '-', '*', '/'];
  $scope.selectedOperator = $scope.operators[0];
  
  
  
   $scope.updateOutput = function (btn) {
      if ($scope.output == "0" || $scope.newNumber) {
          $scope.output = btn;
          $scope.newNumber = false;
      } else {
          $scope.output += String(btn);
      }
      $scope.pendingValue = toNumber($scope.output);
  };
  
  $scope.calculate = function() {
      var A = parseInt($scope.firstNumber);
      var B = parseInt($scope.secondNumber);
      var C = 0;
  
      switch ($scope.selectedOperator) {
          case '+':
              C = A + B;
              break;
          case '-':
              C = A - B;
              break;
          case '*':
              C = A * B;
              break;
          case '/':
              C = A / B;
              break;                
      }
  
      $scope.result = C;
  }; });
  </code></pre>
  
  <p>Plnkr: <a href="http://plnkr.co/edit/hkjsDJEUTJMFOkdMmgNM?p=preview" rel="nofollow">http://plnkr.co/edit/hkjsDJEUTJMFOkdMmgNM?p=preview</a></p>