Unable to hide table with no content in Angular

I'm using Angular with Bootstrap to display a table. I want to hide the table when there is no data in it. When I use the code below, the page still displays the table with headings when it initially loads. If I refresh, the table disappears. Any thoughts on what I'm doing wrong here?

<table class="table borderless" ng-show="projectList.projects.length">
  <h4 ng-show="projectList.projects.length">Your Selections</h4>
  <thead>
  <tr class="info">
    <th colspan="2">Service Type</th>
    <th>Name</th>
    <th>Cost</th>
    <th>Edit</th>
    <th>Delete</th>
  </tr>
  </thead>
</table>

myApp.controller('ProjectListCtrl', function ProjectListCtrl(Projects, $location) {
  var projectList = this;
  projectList.projects = Projects;

 //...
});