title: How to hide some table columns based on screen size while using repeat Angular Material
body: <p>I have a table that contains multiple columns and rows. When viewing on a small screen(phone) i want to hide some of those columns, otherwise show all columns.
  The data inside my table is populated using a repeat. As i re-use the table in multiple places i would like to keep the repeat as the column and row count is different.</p>
  
  <pre><code>&lt;table md-table class="md-data-table" id="data-table"&gt;
              &lt;thead md-head md-order="gridCtrl.gridModel.orderBy"&gt;
              &lt;tr md-row&gt;
                  &lt;th md-column ng-repeat="header in gridCtrl.gridModel.headers" md-order-by="fields[{{$index}}].value"&gt;
                      {{header.title}}
                  &lt;/th&gt;
              &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody md-body&gt;
              &lt;tr md-row ng-repeat="item in gridCtrl.gridModel.items | orderBy: gridCtrl.gridModel.orderBy | limitTo: gridCtrl.gridModel.itemsPerPage : (gridCtrl.gridModel.firstPage -1) * gridCtrl.gridModel.itemsPerPage"&gt;
                  &lt;td md-cell ng-repeat="field in item.fields"&gt;
                      &lt;div ng-if="gridCtrl.isLink(field)"&gt;
                          &lt;h4 class="blue-link" id="gridFieldString{{field.value | idfy}}" ng-click="gridCtrl.click($event, field)"&gt;
                              {{field.value}}
                          &lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div ng-if="!gridCtrl.isLink(field)"&gt;{{field.value}}&lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
  </code></pre>