JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div ng-app="app" ng-controller="PersonController">
<div class="container">
<h2>Neue Person</h2>
<form name="addForm">
<div class="form-group">
<label for="person.firstName" class="control-label">First Name</label>
<input id="person.firstName" type="text" class="form-control" ng-model="person.firstName" required />
</div>
<div class="form-group">
<label for="person.lastName" class="control-label">Last Name</label>
<input id="person.lastName" type="text" class="form-control" ng-model="person.lastName" required />
</div>
<div class="form-group">
<label for="person.city" class="control-label">City</label>
<select id="person.city" class="form-control" ng-model="person.city" ng-options="city for city in cities"></select>
</div>
<button class="btn btn-success" ng-click="add()" ng-disabled="addForm.$invalid">Add</button>
</form>
</div>
<div class="container">
<h2>Liste</h2>
<table class="table table-striped">
<tr>
<th>Name</th>
<th>Ort</th>
<th>
<input ng-model="searchText" type="search" placeholder="Search" />
</th>
</tr>
<tr ng-repeat="person in people | filter:searchText">
<td>{{ person | fullName }}</td>
<td>{{ person.city }}</td>
<td>
<button ng-click="remove($index)" class="btn btn-danger">Delete</button>
</td>
</tr>
</table>
</div>
</div>
JavaScript
var people = [{
firstName: 'Hubert',
lastName: 'Mayer',
city: 'Salzburg'
}, {
firstName: 'Susanne',
lastName: 'Huber',
city: 'Wien'
}, {
firstName: 'Max',
lastName: 'Berger',
city: 'Linz'
}];
var cities = ['Salzburg', 'Wien', 'Berlin'];
var app = angular.module('app', []);
app.controller('PersonController', function ($scope) {
$scope.people = people;
$scope.person = {};
$scope.cities = cities;
$scope.add = function () {
$scope.people.push($scope.person);
$scope.person = {};
};
$scope.remove = function (idx) {
people.splice(idx, 1);
};
});
app.filter('fullName', function () {
return function (person) {
return person.firstName + ' ' + person.lastName;
};
});