angularjs change element based on dropdown select -

using angularjs

i have 3 select dropdowns , button json list

focus select dropdown looks this:

<select id='sort' ng-model='sort'>   <option value='1'>id</option>   <option value='2'>departmentname</option>   <option value='3'>number of employees</option> </select> <button ng-click="getinfo()">get info</button> 

the table looks this

<table> <tr> <td>{{ depid }}</td> <td>{{ depname }}</span></td> <td>{{ depemp }}</td></tr> 

in controller have:

$scope.depid = "department id"; $scope.depname = "departmentname"; $scope.depemp = "number of employees";  $scope.getinfo = function() {   var url = "";     ... } 

based on selection "sort" want sort column bold/strong or uppercase.

how do this?

you can use ng-class on td elements:

<tr>      <td ng-class="{bold : sort == 1}">{{ depid }}</td>      <td ng-class="{bold : sort == 2}">{{ depname }}</span></td>      <td ng-class="{bold : sort == 3}">{{ depemp }}</td> </tr> 

and add css rule:

.bold {      font-weight: bold; } 

here's fiddle demonstration.