AngularJS - Listen for onclick events for all table <td>

Question

Is there a way to use angular.element(...).on('click', onTdClick); (for example) in a way that executes onTdClick (providing the element to it) on every that gets clicked?

Let's say I have 2 tables, both have cells and columns.
I want to be able to click on CELLS and send the element of what I clicked and send it to onTdClick($event) .

$scope.onTdClick = function(ev){
    window.getSelection().selectAllChildren(ev.target);
};

Essentially doing the same as: ng-click="onTdClick($event)" without having to put ng-click on hundreds of <td> 's

I dynamically add table rows and table cells with .insertRow and .insertCell
https://www.w3schools.com/jsref/met_table_insertrow.asp
So statically doing angular.element().find('td').on() wont work well here.

Whats my end result?

I'm attempting to make it so I can click <td> 's to essentially highlight cells by just clicking them. The highlight code is already tested and works: window.getSelection().selectAllChildren(ev.target);
(where ev is the td element)

Answer 1

You shouldn't use insertRow with AngularJS. Instead, you should use ng-repeat with an array that has an object for every row, and just push objects when you want to insert a row.

$scope.insertRow = function(){
    $scope.tdList.push({});//push whatever you want
}

If you want the number of cells to be variable, you can store some param in this object to tell the view how many cells the row has, and put a nested ng-repeat inside to create the cells