Generate List and Table via ng-repeat

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