AngularJS Simple Array Push/Array Splice sample

  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
    
    <script src="scripts.js"></script>
  </head>
  
    <body ng-controller="mainCtrl" data-ng-app="appmain">
    <h1>{{ pageTitle }}</h1>
    <table style="width: 50%">
      <tr ng-repeat="i in items">
        <td>{{ i.Name }}</td>
        <td><button class="btn btn-primary" type="button" ng-click="remove($index)">Remove</button></td>
      </tr>
    </table>
    <hr /><br />
    <input type="text" class="form-control" ng-model="newPerson.name" />
    <button type="button" class="btn btn-primary" ng-click="addPerson()">Add</button>
    
    <pre>
      Debug: {{ newPerson.name }}
    </pre>
  </body>

</html>

var app = angular.module("appmain", []);

app.controller("mainCtrl", ['$scope', function($scope) {
  
  $scope.newPerson = [];
  $scope.items = [
    {
      
      Name: "Fred Flinstone"
    },
    {
      
      Name: "Bruce Wayne"
    },
    {
     
      Name: "Cat Woman"
    }

  ];
  $scope.pageTitle = "Array demo";
  
  $scope.remove = function(index) {
    $scope.items.splice(index, 1);
  }
  
  $scope.addPerson = function() {
    $scope.items.push({
      Name: $scope.newPerson.name
    });
   $scope.newPerson.name = '';
  }
}]);