title: How to use ng-repeat and filter to hide some columns in a dynamic table?
body: <p>I have a dynamic data set returned from a database for which I am trying to create a generic table that can always list it, no matter the number of columns or rows.</p>
  
  <p>It works fine but the problem I am having is that I want to be able to hide some columns, like the ID for example.</p>
  
  <p>This is how the data looks like:</p>
  
  <pre><code>scope.columns = [
      {
          'Name': 'ID',
          Visible: false,
      },
      {
          'Name': 'Name',
          Visible: true,
      },
      {
          'Name': 'Description',
          Visible: true,
      },
  ];
  
  scope.rows = [
      {
          ID: 1, // should be hidden because ID column above is set to Visible - false
          Name: 'Test',
          Description: 'Its a test',
      },
      {
          ID: 2, // should be hidden because ID column above is set to Visible - false
          Name: 'Test 2',
          Description: 'Its a test 2',
      }
  ];
  </code></pre>
  
  <p>And this is <code>HTML</code> for the <code>table</code> generation:</p>
  
  <pre><code>&lt;table class="table"&gt;
      &lt;!-- This part works fine and doesn't show some of the columns --&gt;
      &lt;tr&gt;
          &lt;th ng-repeat="column in columns | filter: { Visible: 'true'}"&gt;
              &lt;span ng-bind="column.Name"&gt;&lt;/span&gt;
          &lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr ng-repeat="row in rows"&gt;
          &lt;td ng-repeat="col in row"&gt; &lt;!-- This is the part where I need filter the cols based on the column.Visible above --&gt;
              {{col}}
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I tried adding a filter on the <code>&lt;td&gt;</code> but I am not sure how to filter based on the <code>scope.columns</code> array.</p>