Sorting Up/down Icons Are Not Visible In Angularjs Using Ng-repeat

I'm able to sort the table data on click event of table headers. But unable to see the up/down icon accordingly. I picked this code from here.plnkr This is fine when I'm executing

Solution 1:

I recommend that you use ng-show instead ng-if

<spanclass="fa fa-sort-down columnSortIcons"ng-show="!(ctrl.reverse) && key == ctrl.predicate"></span><spanclass="fa fa-sort-up columnSortIcons"ng-show="ctrl.reverse && key == ctrl.predicate"></span>

Solution 2:

The issue got resolved by changing below line.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" />

with

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" /> 

It is making sense that, even though the url locating font-awesome.css, but for href,it is required to tell protocol(http) to locate the css file from web.