Multiple Radio Buttons on select attach div with down arrow as background image

I have list of inputs of type radios, these drop downs provide sort functionality on data set based on select. Initially, the select provides sorting on ascending order. To provide both sorts of sorting (ascending & descending ) , on select of radio would like to display a down arrow image initially & sort data in ascending and then when the user clicks the arrow it will turn as up arrow image and sorts data in descending order. And when the user clicks the other radio the arrow will be removed from previously selected radio and added to current selected radio.

Here is the HTML

<ul>
<li> <input type="radio" id="btn_Value" name="btn_Sort" value="Value" ng-model="sortType" ng-click="sortChartData('Value')"  />&#09;&#09;&#09;Value</li>
<li>  <input type="radio" id="btn_ScoreSort" name="btn_Sort"  value="Score"  ng-Model="sortType" ng-click="sortChartData('Score')"  />&#09;&#09;&#09;Score</li>
<li>  <input type="radio" id="btn_Quartile" name="btn_Sort" ng-Model="sortType" ng-click="sortChartData('Quartile')" value="Quartile" />&#09;&#09;&#09;Quartile</li>
</ul>

I can attach a div next to each li and set property display none in CSS class and down arrow CSS class and remove the display:none property and add jquery event handler on click. Here is the new HTML.

  <ul>
  <li> <input type="radio" id="btn_Value" name="btn_Sort" value="Value" ng-model="sortType" ng-click="sortChartData('Value')"  />&#09;&#09;&#09;Value<div class="hide ascSort"></div></li>
<li>  <input type="radio" id="btn_ScoreSort" name="btn_Sort"  value="Score"  ng-Model="sortType" ng-click="sortChartData('Score')"  />&#09;&#09;&#09;Score</li>
<li>  <input type="radio" id="btn_Quartile" name="btn_Sort" ng-Model="sortType" ng-click="sortChartData('Quartile')" value="Quartile" />&#09;&#09;&#09;Quartile</li>
</ul>

But, this seems to me as not that efficient way. Can anyone suggest any other approaches ?