Dynamically create HTML table rows from object using angular ng-repeat

FWIW the HTML angular code is being used in Node-RED in a “template” node.

I have an object composed of circuit boards identified by serial numbers. Each circuit board has two channels that each have their own outputs.

These numbers may change though, for example, some circuit boards in the future will have more channels or I will add another circuit board to the system. So I need the table to be created presumably using nested loops to traverse the message object and pull out whatever information is there at the time.

I successfully used ng-repeat to build individual tables for each circuit board by ng-repeating over the channels of each board. But I would prefer if I had one master table of every single circuit board with every channel so that I can sort that table based on the status of setpoint value for example.

Here is my object:

{ "serialNum": {
    "1a": {
            "channel": {
                "0": {
                    "status": "running",
                    "value" : 100.0,
                    "setpoint": 200.0
                },
                "1": {
                    "status": "running",
                    "value" : 100.1,
                    "setpoint": 200.1
                }
            }
        },
    "2a": {
            "channel": {
                "0": {
                    "status": "running",
                    "value" : 200.0,
                    "setpoint": 300.0
                },
                "1": {
                    "status": "running",
                    "value" : 200.1,
                    "setpoint": 300.1
                }
            }
        },
    "3a": {
            "channel": {
                "0": {
                    "status": "stopped",
                    "value" : 300.0,
                    "setpoint": 400.0
                },
                "1": {
                    "status": "stopped",
                    "value" : 300.1,
                    "setpoint": 400.1
                }
            }
        }
    }
}

And here is code I am currently trying (I’m guessing I’m doing a LOT of things wrong here…):

<!DOCTYPE html>
<html>

<style>
table, th , td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>

<table id="board status" border="1" width = 1000px height = 400px>
    <thead>
    <tr>
        <th>Serial #</th>
        <th>Channel #</th>
        <th>Status</th>
        <th>Value</th>
        <th>Setpoint</th>
    </tr>
    </thead>

    <tbody ng-repeat="serial in msg.boardMsg.serialNum">
        <tr ng-repeat="channelNum in msg.boardMsg.serialNum[serial].channel">
            <td> {{serial}} </td>
            <td>{{channelNum}}</td>
            <td ng-style = "{color : msg.boardMsg.serialNum[serial].channel[channelNum].status === 'stopped' ? 'red' : 'green'}">
              {{msg.boardMsg.serialNum[serial].channel[channelNum].status == "stopped" ? "stopped" : "running"}}
            </td>  
            <td>{{msg.boardMsg.serialNum[serial].channel[channelNum].value</td>
            <td>{{msg.boardMsg.serialNum[serial].channel[channelNum].setpoint</td>
        </tr>
    </tbody>
</table>

I want the table to look like this:

enter image description here

So far my code only gives me the header. Thanks in advance for the help!

Source: New feed
Source Url Dynamically create HTML table rows from object using angular ng-repeat