title: Push multiple input strings to scope array, when input value changes (AngularJS)
body: <p>I am trying to add strings to an empty array i have defined in my scope. </p>
  
  <pre><code>$scope.playerNames = [];
  </code></pre>
  
  <p>The number of elements in the array can vary depending on what the user types in the player count input field.</p>
  
  <p>Right now I have a <code>$watch</code> function which checks whether the user increments or decrements the player count and adds new input fields for names accordingly. For each of these input fields, i want to add a name to an array, when the user starts typing it. Value from the input field og the first player would be placed at index 0 and so on. </p>
  
  <p>When the user decrements the player count, the player name (if any) should be removed from the array. </p>
  
  <pre><code>$scope.$watch('playerCount', function (newValue, oldValue) {
          if (newValue &gt; 7) {
              alert("Can't have more than 7 players.");
              $scope.playerCount = oldValue;
          }
          else if (newValue &gt; oldValue) { //if increment player count
              $("#playerNames").append("&lt;input id='player" + newValue +"' type='text' class='form-control' placeholder='Enter name for player" + newValue + "'&gt;");
  
          }
          else if (newValue &lt; oldValue) { //i decrement player count
              console.log("Removing")
              $("#player" + oldValue).remove();
          }
      });
  </code></pre>
  
  <p>Here's an example of how the form looks with 3 players: <a href="https://i.imgur.com/WcjzuNk.png" rel="nofollow noreferrer">http://i.imgur.com/WcjzuNk.png</a></p>
  
  <p>Am i thinking of this problem correctly? Is there a better way to do it? I'm not sure how I should go about binding my generated input forms to my array defined in the scope.</p>