Adding ng-if to a column in a table removes the ability to sort & filter on that column in angular

Question

I'm creating a table of data using ng-repeat and I also want to sort and filter on some of the columns. I've got all of that working fine.
However, I have different users of the site and some should see the 'client' column of and others shouldn't (as it will be pre-filtered for them). So I added an ng-if to that header and column of data but after doing that I can no longer sort or filter by that column when it's showing. So my question is, why does adding ng-if to that column disallow me to filter or sort by it?

Code is below:

<div class="tableScrollWrapper" keep-scroll-pos>
<table class="table table-striped-blue table-hover">
  <thead fix-head>
    <form>
    <tr>
      <th ng-if="clientsToView == 'All'" class="paddingLeft20"><div class="form-group"><div class="input-group"><div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div><input type="text" placeholder="Client" class="form-control" ng-model="clientFilter"></div></div></th>
      <th><div class="form-group"><div class="input-group"><div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div><input type="text" placeholder="Priority" class="form-control" ng-model="priorityFilter"></div></div></th>
      <th><div class="form-group"><div class="input-group"><div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div><input type="text" placeholder="Company Name filter" class="form-control" ng-model="nameFilter"></div></div></th>
      <th><div class="form-group"><div class="input-group"><div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div><input type="text" placeholder="Town" class="form-control" ng-model="townFilter"></div></div></th>
      <th><div class="form-group"><div class="input-group"><div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div><input type="text" placeholder="Postcode" class="form-control" ng-model="postcodeFilter"></div></div></th>
      <th></th>
      <th></th>
      <th class="paddingRight20"></th></tr>
      <tr>
        <th ng-if="clientsToView == 'All'" class="paddingLeft20"><a href="#" ng-click="orderByColumn = 'clientName'; reverseSort = !reverseSort; changeSort('clientName')">Client</a></th>
        <th><a href="#" ng-click="orderByColumn = 'priority'; reverseSort = !reverseSort; changeSort('priority')">Priority</a></th>
        <th><a href="#" ng-click="orderByColumn = 'name'; reverseSort = !reverseSort; changeSort('name')">Company Name</a></th>
        <th>Town</th>
        <th>Post Code</th>
        <th>Phone</th>
        <th>Company Note</th>
        <th class="paddingRight20"></th></tr></thead>
    <tr ng-repeat="company in data.companies | orderBy:orderByColumn:reverseSort | filter:{ clientName: clientFilter, name: nameFilter, town: townFilter, postcode: postcodeFilter } | filter : {priority: priorityFilter} : priorityFilterClear">
      <td ng-if="clientsToView == 'All'" class="paddingLeft20">{{company.clientName}}</td>
      <td><span ng-hide="company.priority == 100">{{company.priority}}<span></td>
      <td><a ui-sref="company({companyID : company.id})">{{company.name}}</a></td>
      <td>{{company.town}}</td>
      <td>{{company.postcode}}</td>
      <td>{{company.phone}}</td>
      <td>{{company.notes}}</td>
      <td class="paddingRight20"><a href="" ng-click="deleteCompany(company.id)"><span class="glyphicon glyphicon-trash marginRight10"></span></a></td></tr>
</table></div>

Answer 1

ng-if will not work in this case as it removes the element from dom instead of hiding it and secondly ng-if creates new child scope which might be the cause of your issue. use ng-show/ng-hide