title: AngularJS: hide column on button click
body: <p>I have a table with four columns and it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/ADzxY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ADzxY.png" alt="enter image description here"></a></p>
  
  <p>I am populating the table using a Javascript array which is like this:</p>
  
  <pre><code>$scope.result = [
   [5, 3/2/2016, 4, 'Bla..bla'],
   [2, 1/4/2016, 3, 'bla..bla.bla'],
   [1, 5/6/2016, 6, 'bla'],
   [4, 2/6/2016, 5, 'blablabla'],
   [3, 3/4/2016, 4, 'bla'],
   [2, 2/4/2016, 5, 'bla'],
   [1, 2/3/2016, 6, 'blablabla'] ];
  </code></pre>
  
  <p>And this is my HTML:</p>
  
  <pre><code>&lt;table class="dataTable" border="1" &gt;
       &lt;tr&gt;
           &lt;td&gt;Number&lt;/td&gt;
           &lt;td&gt;Date&lt;/td&gt;
           &lt;td&gt;Time&lt;/td&gt;
           &lt;td&gt;Description&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr ng-repeat="row in result"&gt;
           &lt;td ng-repeat="item in row"&gt;{{ item }}&lt;/td&gt;
       &lt;/tr&gt;     
  &lt;/table&gt;
  </code></pre>
  
  <p>Now I have four buttons each one with the name of column name.</p>
  
  <pre><code>&lt;span&gt;
     &lt;button&gt;Number&lt;/button&gt;
     &lt;button&gt;Date&lt;/button&gt;
     &lt;button&gt;Time&lt;/button&gt;
     &lt;button&gt;Description&lt;/button&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>When any of those buttons is clicked, I want to show/hide that column. </p>
  
  <p>So if I click on <code>Description</code> button, I want to show/hide the <code>Description</code> column.
  I tried using <code>ng-hide</code> but couldn't get the entire column to hide, it would only hide the first table cell. So how do I do that?
  Thanks :) </p>