Can't get value from form in AngularJS - html

Question

I tried this student manager in HTML+ java last time. So now I want to try in angularJS. When I finished my code, it doesn't seem to work.
There are no error in console so I don't know where I went wrong. Can someone help me to figure out what the error is here?
HTML
<div ng-controll="MyController">
<form role="form" ng-submit="saveStudent()">
<div class="form-group mt-2">
<label for="" class="form-label">Student Name: </label>
<input type="text" required placeholder="Enter student name" class="form-control" ng-model="name">
</div>
<div class="form-group mt-2">
<label for="" class="form-label">Student DOB: </label>
<input type="date" placeholder="mm/dd/yyyy" class="form-control" ng-model="birth">
</div>
<div class="form-group mt-2">
<label for="" class="form-label">Student Gender: </label>
<input type="radio" name="sex" value="male" ng-model="sex" id="male">
<label for="male">Male</label>
<input type="radio" name="sex" value="female" ng-model="sex" id="female">
<label for="female">Female</label>
</div>
<div class="form-group mt-2">
<label for="" class="form-label">Student Language: </label>
<label for="" ng-repeat="language in languagesList">
<input type="checkbox" value="{{language.name}}" ng-checked="checkboxModel.indexOf(language) > -1" ng-click="addLanguage(language)">{{language}}
</label>
</div>
<div class="form-group mt-2">
<label for="">Student Class: </label>
<select name="student_class" class="form-control" ng-model="studentclass">
<option value="">---Select---</option>
<option value="{{ item }}" ng-repeat="item in classList">{{ item }}</option>
</select>
</div>
<div class="form-group mt-2 pb-3">
<button class="btn btn-danger" type="submit">Add</button>
</div>
</form>
<br><br><br>
<div class="card-table " style="margin-top: 20px;">
<h2 style="text-align: center;">Student List</h2>
<div class="content">
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>DOB</th>
<th>Gender</th>
<th>Language</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in studentList track by $index">
<td>{{ item.name }}</td>
<td>{{ item.studentclass }}</td>
<td>{{ item.birth | date}}</td>
<td>{{ item.sex }}</td>
<td>
<div ng-repeat="checkbox in item.checkboxModel">
{{ checkbox }}
</div>
</td>
<td>
<a href="#" class="btn btn-danger" ng-click="removeStudent($index)" style="color: blue;">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Angular JS
var app = angular.module('MyApp', []);
app.controller('MyController', ['$scope', function ($scope) {
$scope.studentList = [];
$scope.classList = ['C2108G1',
'C2108G2',
'C2108G3',
'C2108G4',
'C2108G5',
'C2108L'
];
$scope.languagesList = [
'English',
'Vietnamese',
'Japanese',
'Chinese',
'French'
];
$scope.checkboxModel = [];
$scope.addLanguage = function (language) {
var index = $scope.checkboxModel.indexOf(language);
if (index > -1) {
$scope.checkboxModel.splice(index, 1);
} else {
$scope.checkboxModel.push(language);
}
}
$scope.saveStudent = function () {
var item = {
'name': $scope.name,
'birth': $scope.birth,
'sex': $scope.sex,
'studentclass': $scope.studentclass,
'checkboxModel': $scope.checkboxModel,
}
if ($scope.currentIndex >= 0) {
$scope.studentList[$scope.currentIndex] = item;
$scope.currentIndex = -1;
} else {
$scope.studentList.push(item);
}
}
$scope.currentIndex = -1;
$scope.removeStudent = function (index) {
var option = confirm('Are you sure you want to remove this student?');
if (!option) return;
$scope.studentList.splice(index, 1);
}
}]);