Начнем с работающего примера...
<!doctype html>
<html ng-app>
<head>
<title>My Angular App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script type='text/javascript'>
function UserListCtrl($scope) {
$scope.users = [
{
"name": "Homer S.",
"phone": "(999)321-467",
"message": "Сообщение на внутренней странице Homer S."
},
{
"name": "Bart S.",
"phone": "(999)821-568",
"message": "Сообщение на внутренней странице Bart S."
},
{
"name": "Lisa S.",
"phone": "(999)865-234",
"message": "Сообщение на внутренней странице Lisa S."
},
{
"name": "Alex V.",
"phone": "(999)865-284",
"message": "Сообщение на внутренней странице Alex V."
}
];
$scope.orderProp = "count";/*сортировка модели при открытии страницы*/
$scope.ordering = function(Name){/* функция сортировки модели */
$scope.orderProp = Name;
};
$scope.remove = function(item){/*удаление объекта из модели*/
var index = $scope.users.indexOf(item)
$scope.users.splice(index, 1)
};
$scope.addUser = function(){/*добавление элемента в модель*/
$scope.users.push({
name:$scope.addName,
phone:$scope.addPhone,
message:$scope.addMessage
});
$scope.addName = '';/* reset поля имени*/
$scope.addPhone = '';/*reset поля телефона*/
$scope.addMessage = '';/*reset поля сообщения*/
};
};
</script>
</head>
<style>
th.change{
cursor:pointer;
color:blue;
}
th.change:hover{
text-decoration:underline;
}
.container{
width:900px;
margin:0 auto;
}
</style>
<body ng-controller='UserListCtrl'>
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-bordered">
<th class="change" ng-click="ordering('article')">
По номеру
</th>
<th class="change" ng-click="ordering('name')">
По имени
</th>
<th class="change" ng-click="ordering('phone')">
По телефону
</th>
<th>
Всего пользователей:{{users.length}}
</th>
<tr ng-repeat="user in users | orderBy:orderProp">
<td>{{$index+1}}</td>
<td><a href="#/messages">{{user.name}}</a></td>
<td>{{user.phone}}</td>
<td><input value="Удалить" type="button" ng-click="remove($index)"></td>
</tr>
</table>
<div class="col-md-12">
<form ng-submit="addUser()" class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Имя</label>
<input ng-model="addName" type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Телефон</label>
<input ng-model="addPhone" class="form-control" id="exampleInputEmail2" placeholder="(999)333-444">
</div>
<div class="form-group">
<textarea ng-model="addMessage" class="form-control" id="exampleInputEmail3" placeholder="Введите ваше сообщение..."></textarea>
</div>
<button type="submit" class="btn btn-default">Добавить</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>