<div id="table_filter_container" style="display: block;"> <input id="table_filter_text_box" class="filter_text_box text_box_transient" placeholder="Filter" ng-model="query"> </div> <table class="data_table"> <tbody> <tr class="data_table_row" ng-repeat="binding in bindings | filterBinding:query"> <td ng-class="{ data_table_cell: true, no_overflow: !binding._is_selected }" style="text-align: right; padding-right: 30px;" ng-click="binding._is_selected = !binding._is_selected">{{ binding.command }}</td> <!-- Raw binding commands are shown in next line on a click --> <td ng-class="{ data_table_cell: true, no_overflow: !binding._is_selected }" style="text-align: left; padding-right: 30px;" ng-click="binding._is_selected = !binding._is_selected"> <div ng-repeat="variety in binding.bindings"> {{ variety.readable_binding }} <div class="raw_binding" ng-repeat="raw in variety.raw_bindings" ng-show="binding._is_selected" > {{ raw }} </div> </div> </td> </tr> </tbody> </table>