Angular: Empty Fiddle

http://angularjs.org/

by kirky93

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
  <table ng-show="showFirstTable"
         class="table1">
     <thead>
       <tr>
         <th>1</th>
         <th>2</th>
         <th>3</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>la</td>
         <td>la</td>
         <td>la</td>
       </tr>
     </tbody>
  </table>
  <table class="table2">
     <thead ng-show="!showFirstTable">
       <tr>
         <th>1</th>
         <th>2</th>
         <th>3</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>q</td>
         <td>q</td>
         <td>q</td>
       </tr>
     </tbody>
  </table>
</div>

CSS

table {
  width: 100%;
  border-collapse: collapse;
}

.table2 thead {
  background-color: yellow;
}

.table1 thead {
  background-color: lightblue;
}

table th, td {
  border: 1px solid black;
}

JavaScript

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.showFirstTable = true;
}