I am attempting to include multiple angular controllers within the same tr tag. However, I am facing an issue with Chrome rewriting the table and not allowing any element between tr and td in the HTML hierarchy.
Currently, I have different colors representing different controllers to call. You can see the visual representation of my goal in the table image below: https://i.sstatic.net/MnfSD.png
While I could use a global controller or multiple div elements with fixed width, it is preferred to use a single tr table. Here is a snippet of the code:
<table>
<tr>
<div ng-controller="testController">
<td>{{testcontrollerscopevalue}}</td> <!-- empty when displayed -->
<td>{{testcontrollerscopevalue2}}</td> <!-- empty when displayed -->
<td>{{testcontrollerscopevalue3}}</td> <!-- empty when displayed -->
</div>
<div ng-controller="testController2">
<td>{{testcontroller2scopevalue}}</td> <!-- empty when displayed -->
</div>
</tr>
</table>
Below is a working example for reference:
<table ng-controller="testController">
<tr>
<td>{{testcontrollerscopevalue}}</td> <!-- set when displayed-->
</tr>
</table>
In the generated HTML by Chrome:
<body>
<div ng-controller="testController"></div>
<div ng-controller="testController2"></div>
<table>
<tbody>
<tr>
<td>{{testcontrollerscopevalue}}</td> <!-- out of scope-->
<td>{{testcontrollerscopevalue2}}</td> <!-- out of scope-->
<td>{{testcontrollerscopevalue3}}</td> <!-- out of scope-->
<td>{{testcontroller2scopevalue1}}</td> <!-- out of scope-->
</tr>
</tbody>
</table>
<table ng-controller="testController">
<tbody>
<tr>
<td>{{testcontrollerscopevalue}}</td> <!-- set -->
</tr>
</tbody>
</table>
If there is a way to achieve this using a different tag instead of div, or if you have any suggestions, I would greatly appreciate your help. Thank you!