ng-click is not working in table header

Hi I am new to AngularJS. I am creating a sample application to sort the data in a table by clicking the table header. On the first click it should arrange it in ascending order. Second click it should arrange it to descending. Below provided are the cshtml code.

<div ng-controller="myController">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th ng-click="sortData('firstname')">First Name</th>
<th>Last Name</th>
<th>Salary</th>
 </tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees|orderBy:'sortColumn'">
<td>{{employee.firstname | lowercase}}</td>
<td>{{employee.lastname| uppercase}}</td>
<td>{{employee.salary |currency:"$":1}}</td>
</tr>
</tbody>
</table>
</div>

Below provided are script for module

var myApp = angula
 .module("myModule", [])
 .controller("myController", function ($scope) {
  var employee = [

 { firstname: "First", lastname: "Trueman", salary: "20001" },
 { firstname: "Second", lastname: "someone", salary: "20002" },
 { firstname: "Third", lastname: "apple", salary: "20003" },
 { firstname: "Fourth", lastname: "parrot", salary: "20004" },
 { firstname: "Fifth", lastname: "mat", salary: "20005" },
 ];
 $scope.employees = employee;
 $scope.sortColumn = "firstname";
 $scope.reverseSort = false;
 $scope.sortData = function (column) {
 $scope.reverseSort = ($scope.sortColumn == column) ? !$scope.reverseSort : false;
$scope.sortColumn = column;
}
});   

For some reason ng-click is not working. Does anyone face the same issue before., If yes can you help me with this.