Displaying up/down arrows in angular js - angularjs

Question

I have created table with sorter in angular js. But I am unable to display up/down arrows to my code.What did I do wrong?
var app=angular.module("myModule",[])
.controller("myController",function($scope){
var employees=[
{name:"suha",dob:new Date("november,20,1995"),gender:"female",salary:"57300.00"},
{name:"Yashu",dob:new Date("august,25,1997"),gender:"female",salary:"47653.0000"},
{name:"sneha",dob:new Date("july,30,1999"),gender:"female",salary:"43300.00"}
];
$scope.employees=employees;
$scope.sortColumn="name";
$scope.reverseSort=false;
$scope.sortData=function(column){
$scope.reverseSort=($scope.sortColumn==column)? !$scope.reverseSort : false;
$scope.sortColumn=column;
}
$scope.getSortClass=function(column){
if($scope.sortColumn==column){
return $scope.reverseSort ? 'arrow-down' : 'arrow-up';
}
return '';
}
});
table,tr,td{
border:1px solid;
padding:10px;
}
.arrow-up,.arrow-down{
width:0;
height:0;
border-right: 5px transparent;
border-left: 5px transparent;
border-bottom-color: 10px solid black;
display: inline-block;
}
Complete code: https://jsfiddle.net/4vy9m3h1/

Answer 1

Add ng-class to th like below
<th ng-click="sortData('name')" ng-class="getSortClass('name')">
Name
</th>
See the working fiddle
Updated fiddle with arrow icons:

Answer 2

The problem actually lies on your CSS. This should work:
table,tr,td{
border:1px solid;
padding:10px;
}
.arrow-up{
width:10px;
height:10px;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-bottom: 10px solid black;
display: inline-block;
}
.arrow-down{
width:0;
height: 0;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-bottom: 10px solid black;
display: inline-block;
}
You've entered a wrong property/value, i.e. using shorthand within this property border-bottom-color.