title: show and hide columns in the table by clicking checkbox using Angularjs
body: <p>I've got a table with large number of columns, I need to be able to show and hide some columns by clickin checkbox. I've tried a lot of variations of ng-click--ng-show, $scope$watch and now I've trying to do this by addEventListener, but It doesn't work, nothing happend. </p>
  
  <pre><code> $scope.showTheItem = false;
  
      function newFunction() {
          document.getElementById("showTheItemEvent").addEventListener('checked', function () {
              $scope.showTheItem = true;
              $scope.digest();
          });
      }
  </code></pre>
  
  <p>and this is html:</p>
  
  <pre><code>&lt;form ng-show="showTheForm"&gt;  // this is the form with checkboxes
              &lt;table onload="newFunction();"&gt;
                  &lt;tr&gt;&lt;td style="vertical-align:top" ng-repeat="item in superKeys" ng-if="$even"&gt;&lt;input type="checkbox" id="showTheItemEvent" ng-true-value="checked" style="margin-left:3px; margin-right:15px"&gt;&lt;label&gt;{{localization.setLicTabs[locale][item]}}&lt;/label&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr style="height:10px"&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td style="vertical-align:top" ng-repeat="item in superKeys" ng-if="$odd"&gt;&lt;input type="checkbox" id="showTheItemEvent" ng-true-value="checked" style="margin-left:3px; margin-right:15px"&gt;&lt;label&gt;{{localization.setLicTabs[locale][item]}}&lt;/label&gt;&lt;/td&gt;&lt;/tr&gt;
              &lt;/table&gt;
          &lt;/form&gt;
  
  &lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt; 
             &lt;th ng-show="showTheItem"&gt;{{localization.setLicTabs[locale].VirtualType}}&lt;/th&gt;
                      &lt;th ng-show="showTheItem"&gt;{{localization.setLicTabs[locale].FarmName}}&lt;/th&gt;
          &lt;/tr&gt;
  &lt;/thead&gt;
   &lt;tbody dir-paginate="item in dataObjHosts | filter:searchFilter | orderBy:orderListType:true | itemsPerPage: pageSize" pagination-id="POPaginatorServersSoft" current-page="currentPage" ng-click="setActiveState($event)"&gt;
                  &lt;tr &gt;
                      &lt;td ng-show="showTheItem"&gt;&lt;span ng-bind="dataObj[item][0].VirtualType"&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;td ng-show="showTheItem"&gt;&lt;span ng-bind="dataObj[item][0].FarmName"&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;/tr&gt;
  </code></pre>
  
  <p>
  </p>