ng-click is not working in table header - angularjs

Question

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.

Answer 1

There were two things needed to be fixed:
sortColumn should be used without the single quote as it is a variable
add reverseSort variable to the orderBy.
<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 : reverseSort">
<td>{{employee.firstname | lowercase}}</td>
<td>{{employee.lastname| uppercase}}</td>
<td>{{employee.salary |currency:"$":1}}</td>
</tr>
</tbody>
I've created a working plnkr here.