Row selection in smart-table is not working

Question

I'm unable to select rows using smart-table. I have added JSON and HTML. code to open modal window

$scope.getSerialData = function(){

    var serialNo ='700001117961';// $scope.asupFormData.asup_serial_no;
    $http({
                method: 'GET',
                url: getAsupSerialData+serialNo+'/',            
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                } // set the headers so angular passing info as form data (not request payload)
            }).success(function(data) {
                $scope.rowCollection1 = JSON.parse(data);
                $scope.rowCollection = $scope.rowCollection1.result;

                console.log($scope.rowCollection)
            }).error(function(data){

            });

    $scope.close = function() {
        uibModalInstance.dismiss('cancel');
    };  

    $scope.saveForms = function(){      

    uibModalInstance.dismiss('cancel');
    }

    var uibModalInstance = $uibModal.open({
        templateUrl: 'asupsearchform.html/',            
        scope: $scope,

        controller:'MainCtrl',
        windowClass: 'device-modal-window'
    });
}   

rowCollection is

[["2017032517580346","HA Group Notification (WEEKLY_LOG) NOTICE"],
["2017031818200373","HA Group Notification (WEEKLY_LOG) NOTICE"],
["2017031818200372","HA Group Notification (WEEKLY_LOG) NOTICE"]]

$scope.getSerialData is getting called from some link which opens a modal window
HTML

<table st-table="rowCollection" class="table" >
<thead>
<tr>
    <th st-sort="firstName">ID</th>
    <th st-sort="lastName">Title</th>   
</tr>
</thead>
<tbody>
<tr  st-select-row="row" st-select-mode="multiple" ng-repeat="row in rowCollection" ng-click="doSomeStuffToSelected(row)">
    <td>{{row[0]}}</td>
    <td>{{row[2]}}</td>


</tr>
</tbody>
</table>

Kindly help. With static code selection was working fine.This is happening when i am using it under modalwindow

Answer 1

You need to define style for .st-selected

<style>
  .st-selected{
    background: #216eff !important;
    color: white !important;
  }
</style>

Also in your rowCollection values are at positions 0 and 1 in child array, whereas you are using positions 0 and 2

 <td>{{row[0]}}</td>
 <td>{{row[2]}}</td>

Here is the WORKING DEMO

EDIT: Demo using modal