Angularjs table with rowspan

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">

</head>


<body>

  <div ng-app="myApp" ng-controller="customersCtrl" ng-cloak>

    <table>
      <thead>
        <tr>
          <td>Id</td>
          <td>Name</td>
          <td>Course</td>
          <td>Grade</td>
          <td>Completed</td>
          <td>Date Completed</td>
        </tr>
      </thead>
      <tbody ng-repeat="x in students">
        <tr>
          <td rowspan="{{x.Courses.length}}"><span>{{ x.Id }}</span></td>
          <td rowspan="{{x.Courses.length}}"><span>{{ x.Name }}</span></td>
          <td><span>{{x.Courses[0].Title}}</span></td>
          <td><span>{{x.Courses[0].Grade}}</span></td>
          <td><span>{{x.Courses[0].Completed}}</span></td>
          <td><span>{{x.Courses[0].DateCompleted}}</span></td>
        </tr>
        <tr ng-repeat="item in x.Courses" ng-if="$index > 0">
          <td><span>{{item.Title}}</span></td>
          <td><span>{{item.Grade}}</span></td>
          <td><span>{{item.Completed}}</span></td>
          <td><span>{{item.DateCompleted}}</span></td>
        </tr>
      </tbody>
    </table>

  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <script src="script.js"></script>

</body>

</html>

// Code goes here

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {

  $scope.students = [{
    Id: 1,
    Name: 'Joe Blogs',
    Courses: [{
      Title: 'Course 1',
      Grade: 87,
      Completed: true,
      DateCompleted: '2018-01-01'
    }, {
      Title: 'Course 2',
      Grade: 2,
      Completed: false
    }]
  }, {
    Id: 2,
    Name: 'Peter Smith',
    Courses: [{
      Title: 'Course 1',
      Grade: 100,
      Completed: true,
      DateCompleted: '2018-01-01'
    }, {
      Title: 'Course 2',
      Grade: 95,
      Completed: true,
      DateCompleted: '2018-01-01'
    }, {
      Title: 'Course 3',
      Grade: 10,
      Completed: false
    }]
  }, {
    Id: 3,
    Name: 'Joanne Someone',
    Courses: [{
      Title: 'Course 3',
      Grade: 55,
      Completed: false,
    }]
  }];
  

});

/* Styles go here */

table,
th,
td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}

tbody:hover {
  background-color: #ddd;
}

thead {
  background: #aaa;
}

https://stackoverflow.com/questions/51237833/trying-to-populate-html-table-with-ng-repeat-using-two-different-arrays