title: Using angularjs, how to perform math operations on textboxes and see result as the values are being typed in?
body: <p>I have an HTML file with 2 textboxes, one for value and the other for quantity. The result text at the bottom multiplies value with quantity and show the result.</p>
  
  <p>The intention is to show the sum of all the rows of pairs of textboxes on the screen. To that end, I have an "add new" button which keeps adding additional pairs of textboxes. </p>
  
  <p>The first set of textboxes that appear on the HTML, reflect the size of the "numbers" array of objects containing properties "val" and "qty". The same values are bound to the textboxes.</p>
  
  <p>However, only the first set of values are added on screen. As I keep adding new textboxes and entering new values, the value of the result should change accordingly, but it simply doesn't.</p>
  
  <p>HTML Code
      
      
          
          
      
      </p>
  
  <pre><code>    &lt;div ng-app="adder" ng-controller="addcontrol"&gt;
          &lt;table&gt;
          &lt;tr&gt;
              &lt;th&gt;Value&lt;/th&gt;&lt;th&gt;Quantity&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr ng-repeat="number in numbers"&gt;
              &lt;td&gt;&lt;input type="text" ng-model="number.val"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" ng-model="number.qty"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="button" ng-click="deleteNumber($index)" value= "Delete"&gt;&lt;/td&gt;pp',[]);
          &lt;/tr&gt;
          &lt;/table&gt;
          &lt;input type="button" ng-click="add()" value="Add new"&gt;Result : {{sum}}
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>var myapp = angular.module('adder', []);
  myapp.controller('addcontrol',function($scope){
  $scope.numbers = [
      {val:100,
       qty:200,
      }
  
  ];
  
  $scope.add = function()
  {
      $scope.numbers.push({val:0,qty:0});
  };
  
  $scope.deleteNumber = function(val)
  {
      numbers.splice(val, 1);
  };
  var result=0;
  angular.forEach($scope.numbers, function(num){
      result+=(num.val * num.qty);
  
  });
  $scope.sum = result;
  </code></pre>
  
  <p>});</p>
  
  <p>What am I doing wrong here?</p>