Empty Angular Boostrap fiddle

Angular 1.4.6 Bootstrap 3.3.6 Fontawesome 4.5.0

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div ng-controller="MyCtrl">
  <div>
  <input type="checkbox" name="money" ng-model="test"> Money<br>
  </div>
  <div>
    <table>
      <tr class="table-head">
        <td>Plant</td>
        <td>Sub Project name</td>
        <td>Project leader</td>
        <td></td>
        <td ng-show="test == false">G2</td>
        <td ng-show="test == false">G5</td>
        <td ng-show="test == false">G7</td>
        <td ng-show="test == false">Progress Status</td>
        <td ng-show="test == false">Last ID Update</td>
        <td ng-show="test == true">Internal Cost</td>
        <td ng-show="test == true">External Cost</td>
        <td ng-show="test == true">Internal cost</td>
        <td ng-show="test == true">External Cost</td>
      </tr>
      <tr ng-repeat="f in fields">
        <td>{{f.Plant}}</td>
        <td>{{f.SubProjectName}}</td>
        <td>{{f.ProjectLeader}}</td>
        <td></td>
        <td ng-show="test == false">{{f.G2}}</td>
        <td ng-show="test == false">{{f.G5}}</td>
        <td ng-show="test == false">{{f.G7}}</td>
        <td ng-show="test == false">{{f.ProgressStatus}}</td>
        <td ng-show="test == false">{{f.LastIDUpdate}}</td>
        <td ng-show="test == true">{{f.InternalCostR}}</td>
        <td ng-show="test == true">{{f.ExternalCostR}}</td>
         <td ng-show="test == true">{{f.InternalCostO}}</td>
        <td ng-show="test == true">{{f.ExternalCostO}}</td>
      </tr>
    </table>
  </div>
</div>

CSS

td{
  border:solid 1px lightgrey;
  padding:0 5px;
  min-width:50px;
}
.table-head{
  background-color:#42f4df;
}

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', ['$scope', function($scope) {
  $scope.test = false;
  $scope.fields = [{
      Plant: "Toulouse ACE",
      SubProjectName: "MES Cff 2018",
      ProjectLeader: "BLANCH CEDRIC",
      G2: "02/07/2018",
      G5: "23/09/2018",
      G7: "01/02/2019",
      ProgressStatus: "In Time",
      LastIDUpdate: "07/02/2018",
      InternalCostR: "0€",
      ExternalCostR: "250€",
      InternalCostO: "386€",
      ExternalCostO: "758€"
    },
    {
      Plant: "Toulouse ACE",
      SubProjectName: "MES Cff 2018",
      ProjectLeader: "BLANCH CEDRIC",
      G2: "02/07/2018",
      G5: "23/09/2018",
      G7: "01/02/2019",
      ProgressStatus: "In Time",
      LastIDUpdate: "07/02/2018",
      InternalCostR: "0€",
      ExternalCostR: "250€",
      InternalCostO: "386€",
      ExternalCostO: "758€"
    },
    {
      Plant: "Toulouse ACE",
      SubProjectName: "MES Cff 2018",
      ProjectLeader: "BLANCH CEDRIC",
      G2: "02/07/2018",
      G5: "23/09/2018",
      G7: "01/02/2019",
      ProgressStatus: "In Time",
      LastIDUpdate: "07/02/2018",
      InternalCostR: "0€",
      ExternalCostR: "250€",
      InternalCostO: "386€",
      ExternalCostO: "758€"
    },
    {
      Plant: "Toulouse ACE",
      SubProjectName: "MES Cff 2018",
      ProjectLeader: "BLANCH CEDRIC",
      G2: "02/07/2018",
      G5: "23/09/2018",
      G7: "01/02/2019",
      ProgressStatus: "In Time",
      LastIDUpdate: "07/02/2018",
      InternalCostR: "0€",
      ExternalCostR: "250€",
      InternalCostO: "386€",
      ExternalCostO: "758€"
    },
    {
      Plant: "Toulouse ACE",
      SubProjectName: "MES Cff 2018",
      ProjectLeader: "BLANCH CEDRIC",
      G2: "02/07/2018",
      G5: "23/09/2018",
      G7: "01/02/2019",
      ProgressStatus: "In Time",
      LastIDUpdate: "07/02/2018",
      InternalCostR: "0€",
      ExternalCostR: "250€",
      InternalCostO: "386€",
      ExternalCostO: "758€"
    }
  ];

}]);