Tengo una mesa con elng-class directiva como esta:

<tbody>
      <tr style="cursor: pointer" class="clickable-row" ng-repeat="firm in device.firmwares" ng-class="{'success': firm.vulnScore<= 4,'warning' :5<= firm.vulnScore,'danger' : 8<=firm.vulnScore}">
          <td>{{firm.fileName}}</td>
          <td>{{firm.extracted}}</td>
          <td>{{firm.vulnScore}}</td>
          <td>{{firm.date}}</td>
      </tr>
</tbody>

Básicamente, lo que hace es colorear las filas según el valor vulnScore; ¡eso funciona muy bien !, pero necesito poder seleccionar las filas, lo logré haciendo:

$('#firm_table').on('click', '.clickable-row', function(event) {
    $(this).addClass('bg-primary').siblings().removeClass('bg-primary');
});

y funciona ... pero lo único que hace es cambiar el texto en blanco, porque ya hay una clase de color actuando sobre él ... Necesito poder eliminar la clase de actuación (éxito, advertencia o peligro) cuando está seleccionado y lo devuelve cuando se selecciona otro, sería fácil si hubiera solo una clase ... ¡pero no sé cómo saber cuál tenía en primer lugar y cómo volver a colocarla!

Esto es lo que tengo: (se selecciona la primera fila):

Lo que logré

y lo que quiero lograr es algo como:

Lo que realmente quiero

si alguien puede ayudar, ¡realmente lo agradecería!