title: Angularjs hide table column
body: <p>I am again working with this table and running into problems.  Standard table using ng-repeat and binding data with ng-bind.  I have a drop down that has All/Open/Posted. It sets disabledToggle to True or False.  So what I would like is when it is set to false the received date column is hidden.  Inversely when it is True then the received date to be visible.</p>
  
  <p>I've placed the ng-hide on the header and it only removed the header not the column data.  I've also place the ng-hide on the table cell.  All this did was shift the table data over one cell.  So the data wouldnt line up correctly.</p>
  
  <pre><code>         &lt;table id="tblItemList" class="table table-responsive table-hover table-striped" oci.fixed-header infinite-scroll="vm.scrollItems()" infinite-scroll-distance="1" infinite-scroll-parent="true"&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                   &lt;th class="cursorptr" style="width:15%"&gt;
                       &lt;span&gt;Invoice Date&lt;/span&gt;
                   &lt;/th&gt;
                   &lt;th ng-hide="!order.disabledToggle"&gt;
                       &lt;span&gt;
                            &lt;span&gt;Received Date&lt;/span&gt;
                       &lt;/span&gt;
                   &lt;/th&gt;
                   &lt;th class="cursorptr" style="width:15%"&gt;
                       &lt;span&gt;
                            &lt;span&gt;Invoice number &lt;/span&gt;
                       &lt;/span&gt;
                    &lt;/th&gt;
                    &lt;th class="cursorptr" style="width:10%"&gt;
                       &lt;span&gt;
                            &lt;span&gt;Order Number&lt;/span&gt;
                       &lt;/span&gt;
                    &lt;/th&gt;
                    &lt;th style="width:6%"&gt;
                       &lt;span&gt;
                            &lt;span&gt;LInes &lt;/span&gt;
                       &lt;/span&gt;
                    &lt;/th&gt;
                    &lt;th style="width:10%"&gt;
                       &lt;span&gt;
                           &lt;/span&gt;
                    &lt;/th&gt;
                   &lt;th style="width:10%"&gt;
                       &lt;span&gt;Tracking&lt;/span&gt;
                    &lt;/th&gt;
                    &lt;th style="width:10%"&gt;
                       &lt;span&gt;Action&lt;/span&gt;
                     &lt;/th&gt;
                  &lt;/tr&gt;
                &lt;/thead&gt;
               &lt;tbody&gt;
                  &lt;tr ng-repeat="order in vm.orders track by $index"  ng-dblclick="vm.EditInvoiceModal(order)" style="cursor:pointer" &gt;                                            
                     &lt;td ng-bind="(order.dtInvoiced | date:'MM/dd/yyyy' )"&gt; &lt;/td&gt; 
                     &lt;td ng-bind="(order.dtReceived | date:'MM/dd/yyyy' )" ng-hide="!order.disabledToggle"&gt;&lt;/td&gt;
                     &lt;td ng-bind="order.invoiceNumber"&gt;&lt;/td&gt;
                     &lt;td ng-bind="order.invoiceItems.mdbsPoNumber"&gt;&lt;/td&gt;
                     &lt;td align="center" ng-bind="order.lines"&gt;&lt;/td&gt;
                     &lt;td ng-bind="(order.total | number:2)"&gt;&lt;/td&gt;
                     &lt;td align="center" ng-bind="order.carrier"&gt;&lt;/td&gt;                                                
                     &lt;td&gt;
                         &lt;a ng-click="vm.EditInvoiceModal(order)"&gt;&lt;i class="fa fa-pencil fa-2x"&gt;&lt;/i&gt;&lt;/a&gt;                                                    
                         &lt;a ng-click="order.disabledToggle || vm.commitOrder(order)" &gt;&lt;/a&gt;
  
                    &lt;/tr&gt;
                 &lt;/tbody&gt;
  </code></pre>