Angular show or hide part of table on click

Question

So I have this json:

var events = [
    {
        eventType: 2,
        deviceOutputs: [
            {
                id: '23',
                type: 'LED 1',
                value: '2',
                show: false
            },{
                id: '14',
                type: 'LED 2',
                value: '5',
                show: false
            }
        ]
    },
    {
        eventType: 1,
        deviceOutputs: [
            {
                id: '15',
                type: 'LED 7',
                value: '6',
                show: false
            },{
                id: '14',
                type: 'LED 2',
                value: '5',
                show: false
            }
        ]
    }
];

I display it in angular like so:

<table>
    <thead>
        <tr>
            <th>Event Type</th>
            <th>Device Outputs</th>
        </tr>
    </thead>
    <tbody data-ng-repeat="event in events">
        <tr>
            <td>{{ event.eventType }}</td>
            <td><div data-ng-repeat="device in event.deviceOutputs">
                <h4 >{{ device.type }}<span class="caret"></span></h4>
                <table data-ng-hide="device.show">
                    <tr>
                       <th>Value: </th><td>{{ device.value }}</td>
                    </tr>
            </div></td>
        </tr>
    </tbody>
</table>

I want, every time I click the <h4> it to show or hide the table of information :)

Answer 1

You can add ng-click to your h4 to toggle the value of device.show:

<h4 ng-click="device.show=!device.show">

This makes it quite clear from the markup what is happening. If your hide/show logic becomes more complicated you can move it into a method on your controller.