<!-- Using angular js display the 10 student details in Table format (using ng-repeat directive use  Array to store data)  -->
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Details</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
    <h2>Student Details</h2>
    <table border="1">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Grade</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="student in students">
                <td>{{ student.name }}</td>
                <td>{{ student.age }}</td>
                <td>{{ student.grade }}</td>
            </tr>
        </tbody>
    </table>

    <script>
        angular.module('myApp', [])
            .controller('myCtrl', function($scope) {
                // Array to store student details
                $scope.students = [
                    { name: 'John', age: 20, grade: 'A' },
                    { name: 'Alice', age: 21, grade: 'B' },
                    { name: 'Bob', age: 22, grade: 'C' },
                    { name: 'Sarah', age: 19, grade: 'A' },
                    { name: 'Mike', age: 20, grade: 'B' },
                    { name: 'Emily', age: 21, grade: 'C' },
                    { name: 'David', age: 22, grade: 'A' },
                    { name: 'Sophia', age: 19, grade: 'B' },
                    { name: 'Daniel', age: 20, grade: 'C' },
                    { name: 'Olivia', age: 21, grade: 'A' }
                ];
            });
    </script>
</body>
</html>
