function CharactersController($scope) {
// Add some characters to the scope.
$scope.characters = [{
name: "Fry",
show: "Futurama"
}, {
name: "Homer",
show: "The Simpsons"
}, {
name: "Sterling",
show: "Archer"
}, {
name: "Kahn",
show: "King of the Hill"
}];
// A function to add a new character.
$scope.addCharacter = function(name, show) {
$scope.characters.push({name: name, show: show});
};
// A function to remove a character.
$scope.removeCharacter = function(character) {
for(var i=0;i<$scope.characters.length;i++) {
if($scope.characters[i] !== character) {
continue;
}
$scope.characters.splice(i, 1);
break;
}
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<div ng-app ng-controller="CharactersController">
<table>
<thead>
<tr>
<th>Name</th>
<th>Show</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="character in characters">
<td>{{character.name}}</td>
<td>{{character.show}}</td>
<td><a href ng-click="removeCharacter(character)">Remove</a></td>
</tr>
<tr>
<td><input type="text" ng-model="name"></input></td>
<td><input type="text" ng-model="show"></input></td>
<td><a href ng-click="addCharacter(name, show)">Add</a></td>
</tr>
</tbody>
</table>
</div>