How to make AngularJS smart table header with the up/down arrows initially to promote users

In jQuery, this is database plug-in to sort table nicely. In AngularJS, I found smart-table is very similar, and also meet most of my needs. However, I have one more request, which is to have those UP/DOWN arrows initially to promote users those columns are sortable.

I got how to have to arrow when the column is sorted, BUT I don't know how to have both up/down arrows before sorting and change to up or down arrow when the column is sorted.

 <thead>
        <tr class="sortable">
            <th >Toggle Expand/Collapse</th>
            <th st-sort="projectName" st-sort-default="default" st-skip-natural="true">Project Name</th>
            <th st-sort="val" st-skip-natural="true">Project Value</th>
            <th st-sort="cost">Cost of Project</th>
            <th st-sort="cost_benefit_ratio">Cost Benefit Ratio</th>
            <th st-sort="creatorName">Creator</th>
            <th st-sort="create_at">Create Time</th>
            <th st-sort="LastEditorName">Last Editor</th>
            <th st-sort="edit_at">Edit Time</th>
            <th> Edit </th>
        </tr>
        <tr>
            <th colspan="10"><input st-search="" class="form-control" placeholder="global search ..." type="text"/></th>
        </tr>
    </thead>

Please see my attached picture.

The first one is what I want to achieve. The second one is my current situation.

I think I solved my problem.

In the CSS:

table thead tr.sortable th{
    background-image:url("./images/up-down-arrow.png");
    background-repeat: no-repeat;
    background-position: center right;
}

.sortable {
    cursor: pointer;
}

.st-sort-ascent{
    background-image:url("./images/up-arrow.png") !important;

}

.st-sort-descent{
    background-image:url("./images/down-arrow.png") !important;
}

Make sure "!important" is added, so the background image will be override.