<div ng-app ng-controller='StudentListController'>
<ul>
<li ng-repeat='student in students'>
<a href='/student/view/{{student.id}}'>{{student.name}}</a>
</li>
</ul>
<button ng-click="insertTom()">Insert</button>
<br />
<table class="table-bordered" ng-controller='AlbumController'>
<tr ng-repeat='track in album'>
<td>{{$index + 1}}</td>
<td>{{track.name}}</td>
<td>{{track.duration}}</td>
</tr>
</table>
</div>
<script src="~/Scripts/angular.js"></script>
<script>
var students = [{ name: 'Mary Contrary', id: '1' },
{ name: 'Jack Sprat', id: '2' },
{ name: 'Jill Hill', id: '3' }];
function StudentListController($scope) {
$scope.students = students;
$scope.insertTom = function () {
$scope.students.splice(1, 0, { name: 'Tom Thumb', id: '4' });
};
}
var album = [{ name: 'Southwest Serenade', duration: '2:34' },
{ name: 'Northern Light Waltz', duration: '3:21' },
{ name: 'Eastern Tango', duration: '17:45' }];
function AlbumController($scope) {
$scope.album = album;
}
</script>