title: How can I use a button to add +1 to a field using AngularJS?
body: <p>I am trying to learn AngularJS. For my first project I want to create a small scorekeeping application. I am taking data from a JSON file then I want to update it on the screen depending on who scores.</p>
  
  <p>I can't seem to figure out how to update the specific goal field using Angular. My current application pushes a new row to the scoresheet:</p>
  
  <pre><code>'use strict';
  
  /* Controllers */
  
  function ScoreKeeper($scope, $http) {
  
    $http.get('json/hometeam.json').success(function(data) {
      $scope.hometeam = data;
    });
  
    $scope.addGoal = function() {
      $scope.hometeam.push({goals: +1});
    };
  }
  </code></pre>
  
  <p>This is the table I am currently using:</p>
  
  <pre><code>    &lt;table class="table table-hover"&gt;
          &lt;thead&gt;
              &lt;th&gt;Player ID&lt;/th&gt;
              &lt;th&gt;No.&lt;/th&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;GP&lt;/th&gt;
              &lt;th&gt;G&lt;/th&gt;
              &lt;th&gt;A&lt;/th&gt;
              &lt;th&gt;PIM&lt;/th&gt;
              &lt;th&gt;Goal&lt;/th&gt;
              &lt;th&gt;Assist&lt;/th&gt;
              &lt;th&gt;Assist&lt;/th&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr ng-repeat="player in hometeam" &gt;
                  &lt;td&gt;{{player.playerid}}&lt;/td&gt;
                  &lt;td&gt;{{player.no}}&lt;/td&gt;
                  &lt;td&gt;{{player.name}}&lt;/td&gt;
                  &lt;td&gt;{{player.gp}}&lt;/td&gt;
                  &lt;td&gt;{{player.goals}}&lt;/td&gt;
                  &lt;td&gt;{{player.assists}}&lt;/td&gt;
                  &lt;td&gt;{{player.pim}}&lt;/td&gt;
                  &lt;td&gt;&lt;button class="btn btn-small" name="add-goal" type="button" ng-click="addGoal()"&gt;&lt;i class="icon-plus"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/td&gt;                
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>I want to be able to click addGoal for the specific player, and then update their goal total. Right now, the current function is creating a new row with goal being 1 and all the other fields are empty. </p>
  
  <p>I'm quite lost on this one, the data is rendering correctly on refresh, however, my update function is not. I know .push() is not the correct method, however I can't seem to find a good resource for Angular to figure out what would be the right method to use. Any help is greatly appreciated. Thank you.</p>