<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>