title: Showing a Div (with calculated values) based upon options selected - Angular
body: <p>I am new to Angular and am trying to build a simple app to teach myself.  I have the following select options which are displaying just the keys of a data object so far. What I want to do is show a value underneath the second select box for each team, which shows the value associated with the key when a first option is selected, then adds to that value when the second option selected. How do I do that in angular?
  I tried {{v}} for just the first one but that didn't work, and I would still need to add the second one.</p>
  
  <pre><code>&lt;div&gt;Team 1&lt;/div&gt;
  &lt;br&gt; Player 1:
  &lt;select class="form-control" ng-model="selectedItem1"&gt;
      &lt;option ng-repeat="(k,v) in data.playerInfo"&gt;{{k}}&lt;/option&gt;
  &lt;/select&gt;
  Player 2:
  &lt;select class="form-control" ng-model="selectedItem2"&gt;
      &lt;option ng-repeat="(k,v) in data.playerInfo"&gt;{{k}}&lt;/option&gt;
  &lt;/select&gt;
  &lt;!-- show value here --&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;div&gt;Team 2&lt;/div&gt;
  &lt;br&gt; Player 1:
  &lt;select class="form-control" ng-model="selectedItem3"&gt;
      &lt;option ng-repeat="(k,v) in data.playerInfo"&gt;{{k}}&lt;/option&gt;
  &lt;/select&gt;Player 2:
  &lt;select class="form-control" ng-model="selectedItem4"&gt;
      &lt;option ng-repeat="(k,v) in data.playerInfo"&gt;{{k}}&lt;/option&gt;
  &lt;/select&gt;
  &lt;!-- show value here --&gt;
  &lt;div ng-show="k == v"&gt;{{v}}&lt;/div&gt;
  </code></pre>
  
  <p>Values would go under the team two boxes.</p>
  
  <p>UPDATE:
  This worked for me!</p>
  
  <pre><code>$scope.calc = function() {
          $scope.calculatedValue = Number($scope.selectedItem1);
          if($scope.selectedItem2){
                  $scope.calculatedValue = Number($scope.selectedItem1) + Number($scope.selectedItem2);
  
          }
  
      }
  
      $scope.calc2 = function() {
          $scope.calculatedValue2 = Number($scope.selectedItem3);
          if ($scope.selectedItem4) {
  
          $scope.calculatedValue2 = Number($scope.selectedItem3) + Number($scope.selectedItem4);
          };
  
      }
  
  &lt;div&gt;Team 1&lt;/div&gt;
      &lt;br&gt; Player 1:
      &lt;select class="form-control" ng-model="selectedItem1" ng-change="calc()"&gt;
          &lt;option ng-repeat="(k,v) in data.playerInfo" ng-value="v" &gt;{{k}}&lt;/option&gt;
      &lt;/select&gt;
      Player 2:
      &lt;select class="form-control" ng-model="selectedItem2" ng-change="calc()"&gt;
          &lt;option ng-repeat="(k,v) in data.playerInfo" ng-value="v"&gt;{{k}}&lt;/option&gt;
      &lt;/select&gt;
      &lt;!-- show value here --&gt;
      &lt;p&gt; Total Value: {{calculatedValue}} &lt;/p&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;div&gt;Team 2&lt;/div&gt;
      &lt;br&gt; Player 1:
      &lt;select class="form-control" ng-model="selectedItem3" ng-change="calc2()"&gt;
          &lt;option ng-repeat="(k,v) in data.playerInfo" ng-value="v" &gt;{{k}}&lt;/option&gt;
      &lt;/select&gt;Player 2:
      &lt;select class="form-control" ng-model="selectedItem4" ng-change="calc2()"&gt;
          &lt;option ng-repeat="(k,v) in data.playerInfo" ng-value="v"&gt;{{k}}&lt;/option&gt;
      &lt;/select&gt;
      &lt;!-- show value here --&gt;
      &lt;p&gt; Total Value: {{calculatedValue2}} &lt;/p&gt;
  </code></pre>