title: smart table column show/hide toggle
body: <p>I'm new to AngularJS and SmartTable...I'm currently trying to get SmartTable to have a show/hide toggle for the columns.  From what I undertstand SmartTable doesn't do this, so I am using the ng-Grid show/hide feature...trying to follow this solution:
  <a href="https://stackoverflow.com/questions/18656034/how-to-hide-show-ng-grid-column-externally">how to hide/show ng-grid column externally?</a></p>
  
  <p>When I implemented this solution my columns aren't showing up.</p>
  
  <p>How do you set smartTable columns to "show" upon initial set up?  I think this is what I'm missing...</p>
  
  <p>Here is my js:</p>
  
  <pre><code>var app = angular.module('myApp', ['smart-table', 'ngGrid']);
  
  app.controller('paginationCtrl', ['$scope', function (scope) {
  var nameList = ['Brian', 'Bob', 'Marie', 'Jennifer', 'Frank'],
      familyName = ['Smith', 'Miller', 'Patel', 'Jefferson', 'Mendez'];
  
  ...
  
  $scope.toggleCol= function(i) {
     $scope.gridOptions.$gridScope.columns[i].toggleVisible()
  }
  
      scope.itemsByPage=15;
  
  scope.rowCollection = [];
  for (var j = 0; j &lt; 200; j++) {
      scope.rowCollection.push(createRandomItem());
  }
  
  }]);
  </code></pre>
  
  <p>and here's my html:</p>
  
  <pre><code>&lt;body ng-controller="paginationCtrl"&gt;
  &lt;p&gt;Smart Table Example&lt;/p&gt;
  &lt;input type="button" value="First Name" ng-click="toggleCol(0)" /&gt;
  &lt;table class="table table-striped" st-table="rowCollection"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th st-sort="firstName"&gt;first name&lt;/th&gt;
        &lt;th st-sort="lastName"&gt;last name&lt;/th&gt;
        &lt;th st-skip-natural="true" st-sort="balance"&gt;balance&lt;/th&gt;
        &lt;th&gt;email&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr ng-repeat="row in rowCollection"&gt;
        &lt;td&gt;{{row.firstName}}&lt;/td&gt;
        &lt;td&gt;{{row.lastName}}&lt;/td&gt;
        &lt;td&gt;{{row.balance}}&lt;/td&gt;
        &lt;td&gt;{{row.email}}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;tfoot&gt;
      &lt;tr&gt;
        &lt;td class="text-center" colspan="5"&gt;
          &lt;div st-displayed-pages="7" st-items-by-page="itemsByPage" st-pagination=""&gt;&lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tfoot&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p></p>
  
  <p>You can see my entire setup on my plunker example: </p>
  
  <p><a href="http://plnkr.co/edit/6F8NsDdgaWranTXeIQuV?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/6F8NsDdgaWranTXeIQuV?p=preview</a></p>
  
  <p>Thanks!!</p>