title: How to push a new item into an array of objects using AngularJS?
body: <p>On my website are a list of user created via points. The user starts with one, and then if they wish to add another they can click “add” and it should add a new object inside of the array with an empty value and the user can input a new value. The user can continue adding until they have 5. How would I do this? Below is my code.</p>
  
  <p>I want:</p>
  
  <ol>
  <li>User can create via points which add a new item with val="" and then the user can change the value with the input.</li>
  <li>After 5 via points no more are allowed.</li>
  </ol>
  
  <p>Thank you for any help!</p>
  
  <pre><code>//HTML
  
  &lt;table&gt;
      &lt;tr ng-repeat="item in viaPoints"&gt;
          &lt;td&gt;
  
              &lt;p class="title-icon form-label"&gt;VIA LOCATON {{$index + 1}}&lt;/p&gt;
  
              &lt;button style="bottom: -3px;" class="transparent position pull-right" ng-click="removeViaPoint($index)"&gt;
                  &lt;img src="images/icons/close-14.png"&gt;
              &lt;/button&gt;
  
              &lt;input class="form" id="drop-off" type="text" value="{{x}}" ng-model="item.val"&gt;
  
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;button class="add" ng-click="addViaPoint()"&gt;+ ADD MORE LOCATIONS&lt;/button&gt;
  &lt;button class="okay okay-full"&gt;OKAY&lt;/button&gt;
  
  
  
  //Angular
  
  
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
  
  //Via Point Objects
  
  
  $scope.viaPoints = [
  
  {val:"Hanoi"}
  
  ]
  
  //Push Via Points
  
  $scope.addViaPoint = function () {
      $scope.viaPoints.push("val:''");
  }
  
  //Remove Via Point
  
  $scope.removeViaPoint = function (x) {
      $scope.viaPoints.splice(x, 1);
  }
  
  });
  </code></pre>