如何使用函数减少值

     angular.module('scoreKeeper', []).
controller('score', ['$scope', function ($scope) {

  $scope.gameInfo = {
    gameStarted: false,
    servesSinceSwitch: 0,
    scoreSwitchMode: 0,
    numberOfPlayers: 2 };


  $scope.team1 = {
    name: "Team 1",
    score: 0,
    serving: false };

  $scope.team2 = {
    name: "Team 2",
    score: 0,
    serving: false };


  $scope.player1 = {
    name: "P1",
    serving: true };


  $scope.player2 = {
    name: "P2",
    serving: true };


  $scope.player3 = {
    name: null,
    serving: false };


  $scope.player4 = {
    name: null,
    serving: false };


  $scope.startGame = function () {$scope.gameInfo.gameStarted = true;};

  $scope.players = function (n) {
    $scope.gameInfo.numberOfPlayers = n;
    if (n == 2) {
      $scope.player3.name = null;
      $scope.player4.name = null;
    } else {
      $scope.player3.name = "P3";
      //$scope.player3.serving = true;
      $scope.player4.name = "P4";
    //$scope.player4.serving = true;

    }

  };
  $scope.addPoint = function (i) {
    // Start the game, give the Serving class to the person who won the rally
    if (!$scope.team1.serving && !$scope.team2.serving) {
      $scope['team' + i].serving = true;
      $scope.footer.message = "Game on!";
    } else {

      // Increment the player's score, how many serves since the last switch, and the highest current score
      $scope['team' + i].score++;
      $scope.gameInfo.servesSinceSwitch++;
      $scope.gameInfo.highestScore = Math.max($scope.team1.score, $scope.team2.score);

      // Echo who's in the lead or if it's tied
      if ($scope.team1.score > $scope.team2.score) {
        if ($scope.player3.name) {
          $scope.gameInfo.teamWithHighScore = $scope.team1.name;
        } else {
          $scope.gameInfo.teamWithHighScore = $scope.player1.name;
        }
        $scope.footer.message = $scope.gameInfo.teamWithHighScore + " is in the lead";
      } else if ($scope.team1.score < $scope.team2.score) {
        if ($scope.player3.name) {
          $scope.gameInfo.teamWithHighScore = $scope.team2.name;
        } else {
          $scope.gameInfo.teamWithHighScore = $scope.player2.name;
        }
        $scope.footer.message = $scope.gameInfo.teamWithHighScore + " is in the lead";
      } else if ($scope.team1.score == $scope.team2.score) {
        $scope.footer.message = "Game is tied";
      }

      if ($scope.team1.score == 10 && $scope.team2.score == 10) {
        $scope.gameInfo.scoreSwitchMode = 1;
      }

      // Figure out if serves are switching by 5
      if ($scope.gameInfo.servesSinceSwitch == 5 && $scope.gameInfo.scoreSwitchMode == 0) {
        $(".team").toggleClass("team__isServing");
        $scope.team1.serving = !$scope.team1.serving;
        $scope.team2.serving = !$scope.team2.serving;

        if ($scope.gameInfo.numberOfPlayers == 4) {
          if ($scope.team1.serving) {
            $scope.player1.serving = !$scope.player1.serving;
            $scope.player3.serving = !$scope.player3.serving;
          } else {
            $scope.player2.serving = !$scope.player2.serving;
            $scope.player4.serving = !$scope.player4.serving;
          }
        }
        $scope.gameInfo.servesSinceSwitch = 0;

        // Or by 1
      } else if ($scope.gameInfo.scoreSwitchMode == 1) {
        $(".team").toggleClass("team__isServing");
        $scope.team1.serving = !$scope.team1.serving;
        $scope.team2.serving = !$scope.team2.serving;
        if ($scope.gameInfo.numberOfPlayers == 4) {
          if ($scope.team1.serving) {
            $scope.player1.serving = !$scope.player1.serving;
            $scope.player3.serving = !$scope.player3.serving;
          } else {
            $scope.player2.serving = !$scope.player2.serving;
            $scope.player4.serving = !$scope.player4.serving;
          }
        }
      }

      // Figure out if the game is over and who won
      if (Math.abs($scope.team1.score - $scope.team2.score) >= 2 && $scope.gameInfo.highestScore >= 21) {
        $(".scoreBoard").addClass("dimmed");
        $scope.footer.message = "Game over! " + $scope.gameInfo.teamWithHighScore + " wins!";
      }
    }
  };

  $scope.footer = {
    message: "Rally for serve" };

}]);
 

    * {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100vw;
  font-family: sans-serif;
  background: #ECF0C9;
}

.score {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  position: fixed;
  height: 90vh;
  width: 100%;
  z-index: 999;
  color: #ECF0C9;
  font-size: 20vmax;
  pointer-events: none;
}
.score > span {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.screen {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.scoreBoard {
  flex: 1;
  display: flex;
  justify-content: space-between;
}

.team {
  color: #ECF0C9;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.team.team-1 {
  margin-right: 4px;
}
.team.team-1 .player-right {
  background: #45B29D;
  margin-top: 2px;
}
.team.team-1 .player-left {
  background: #DF5A49;
}
.team.team-1 .serving__isServing {
  order: 1;
}
.team.team-1 .serving__isNotServing {
  order: -1;
}
.team.team-2 {
  margin-left: 4px;
}
.team.team-2 .player-left {
  background: #E27A3F;
  margin-top: 2px;
}
.team.team-2 .player-right {
  background: #EFC94C;
}
.team.team-2 .serving__isServing {
  order: -1;
}
.team.team-2 .serving__isNotServing {
  order: 1;
}
.team.team__isServing .serving__isServing {
  color: #ECF0C9;
  animation: serving 1s infinite reverse;
}

.player {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.player input {
  width: 90%;
  height: 10vh;
  background: #334D5C;
  color: #ECF0C9;
  border: none;
  text-align: center;
  font-size: 8vh;
}
.player.player-alone {
  order: 3;
}

header, input.teamName {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #334D5C;
  color: #6b7e7d;
  max-height: 10vh;
  font-size: 8vh;
  flex: 1;
  border: none;
  text-align: center;
}

@keyframes serving {
  0% {
    opacity: 1;
  }
  100% {
    opacity: .5;
  }
}
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10vh;
  font-size: 5vmin;
  color: #334D5C;
}
footer.menu {
  display: flex;
  justify-content: space-between;
  padding: 0 2vw;
}
footer.menu div {
  display: flex;
  flex: 1;
  justify-content: space-around;
}
footer.menu button {
  background: #334D5C;
  color: #ECF0C9;
  border: none;
  height: 9vh;
  font-size: 7vh;
  padding: 0 2vw;
}
footer.menu button.notSelected {
  color: #909f93;
}

.dimmed {
  opacity: .5;
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body ng-app="scoreKeeper" ng-controller="score">
  
  <div class="screen screen-start" ng-if="!gameInfo.gameStarted">
    <div class="scoreBoard">
      
      <div class="team team-1">
        <input type="text" class="teamName" ng-model="team1.name" ng-if="gameInfo.numberOfPlayers == 4"></input>
        <div class="player player-left">
          <input type="text" ng-model="player1.name"></input>
        </div>
        <div class="player player-right player-serveSpot" ng-if="gameInfo.numberOfPlayers == 4">
          <input type="text" ng-model="player3.name"></input>
        </div>
      </div>
      
      <div class="team team-2">
        <input type="text" class="teamName" ng-model="team2.name" ng-if="gameInfo.numberOfPlayers == 4"></input>
        <div class="player player-right">
          <input type="text" ng-model="player2.name"></input>
        </div>
        <div class="player player-left" ng-if="gameInfo.numberOfPlayers == 4">
          <input type="text" ng-model="player4.name"></input>
        </div>
      </div>
      
    </div>
    <footer class="menu">
      <div>
        <button ng-click="players(2)" ng-class="{'notSelected':gameInfo.numberOfPlayers == 4}">2</button>
        <button ng-click="players(4)" ng-class="{'notSelected':gameInfo.numberOfPlayers == 2}">4</button>
      </div>
      <div>
        <button ng-click="startGame()">START</button>
      </div>
    </footer>
  </div>
  
  <div class="score" ng-if="team1.serving || team2.serving">
    <span>{{team1.score}}</span>
    <span>{{team2.score}}</span>
  </div>
  
  <div class="screen screen-game" ng-if="gameInfo.gameStarted">
    <div class="scoreBoard">
      
      <div class="team team-1" ng-click="addPoint(1)" ng-class="{'team__isServing':team1.serving}">
        <header ng-class="{'serving__isServing':player1.serving, 'serving__isNotServing':!player1.serving}">{{player1.name}}</header>
        <div class="player player-left" ng-class="{'player-alone':!player3.name}" style="position:relative">       
            <h3  type="button"  id="subt1" style="position: absolute;bottom: 0;left: 10px;font-size: 50px;color: white;font-weight:bolder;    margin: 0px !important;cursor: pointer;">-</h3></div>
        <div class="player player-right player-serveSpot" ng-if="player3.name"></div>
        <header ng-class="{'serving__isServing':player3.serving, 'serving__isNotServing':!player3.serving}" ng-if="player3.name">{{player3.name}}</header>
             </div>
      
      <div class="team team-2" ng-click="addPoint(2)" ng-class="{'team__isServing':team2.serving}">
        <header ng-class="{'serving__isServing':player2.serving, 'serving__isNotServing':!player2.serving}">{{player2.name}}</header>
        <div class="player player-right" ng-class="{'player-alone':!player3.name}"style="position:relative">   
            <h1  type="button"  id="subt2"style="position: absolute;bottom: 0;right: 10px;font-size: 50px;color: white;font-weight:bolder;    margin: 0px !important;cursor: pointer;">-</h1></div>
        <div class="player player-left" ng-if="player4.name"></div>
        <header ng-class="{'serving__isServing':player4.serving, 'serving__isNotServing':!player4.serving}" ng-if="player4.name">{{player4.name}}</header>
      </div>
      
    </div>
    <footer>{{footer.message}}</footer>
  </div>
</body>