Selecting single row on click in a data table - angularjs

Question

I have been trying to select one row that is clicked on but the problem I am facing is that the table being paginated shows the selected row on different pages and does not show on other pages.
I am simply removing and adding a css class on click on a row.
something like -
function rowClicked (){
var table = $('#test').DataTable();
$('#test tbody').on( 'click','tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
console.log('helloe 1');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
console.log('helloe 3');
}
} );
}

Answer 1

You can user Angualr directive like that to your table <table select-row>
angular.module('myApp')
.directive('selectRow', selectRow);
function selectRow($compile) {
var directive = {
bindToController: true,
controller: testCtrl,
controllerAs: 'vm',
link: link,
restrict: 'EA',
scope: {}
};
return directive;
function link(scope, element, attrs, vm) {
var target, compileScope, newTd, template ;
target = angular.element($('table tr'));
compileScope = scope;
scope.arr = [];
angular.forEach(target, function(item) {
return scope.arr.push(item.textContent);
});
template = '<table><thead><tr><th></th><tbody><tr ng-class="selected[$index]" ng-repeat="t in arr track by $index" ng-click="selectRow($index)"><td >{{t}}</td></tr></tbody></tr></thead></table>';
template = angular.element(template);
$compile(template)(compileScope);
element.replaceWith(template);
// function to select row
scope.selectRow = function($index) {
scope.selected = [];
scope.index = $index;
scope.selected[$index] = scope.selected[$index] === 'selected' ? '' :'selected';
}
}
function testCtrl() {
}
}