<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="tableCtrl as vm">
   <div class="container">
     <div>
        <button type="button" ng-click='vm.changeSource(vm.books)'>Books</button> 
        <button type="button" ng-click='vm.changeSource(vm.colors)'>Colors</button> 
        <button type="button" ng-click='vm.changeSource(vm.customers)'>Customers</button>  
        <button type="button" ng-click='vm.changeSource(vm.products)'>Products</button>  
     </div>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th ng-repeat="(key, value) in vm.records[0]">{{key}}</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="(key, value) in vm.records">
            <td ng-repeat="(key, value) in value">
              {{value}}
            </td>
          </tr>
        </tbody>
      </table>
   </div>
  </body>

</html>
(function(){
  
  var app = angular.module("myApp", []);
  app.controller("tableCtrl", function(){
    var vm = this;
    vm.records = [];
    vm.changeSource = function(source){
      vm.records = source;
    }
    
    vm.$onInit = function(){
      vm.changeSource(vm.books);
    }
    
    vm.books = [
      { "Book ID": "1",  "Book Name": "Computer Architecture", "Category": "Computers", "Price": "125.60" },
      { "Book ID": "2", "Book Name": "Asp.Net 4 Blue Book", "Category": "Programming", "Price": "56.00"  },
      { "Book ID": "3", "Book Name": "Popular Science",  "Category": "Science",  "Price": "210.40" }
    ];
    
    vm.colors = [
      { "color": "black", "category": "hue", "type": "primary", "code": "#000" },
      { "color": "white", "category": "value", "code": "#FFF" },
      { "color": "red",  "category": "hue",  "type": "primary", "code": "#FF0" },
      { "color": "blue", "category": "hue", "type": "primary", "code": "#00F" },
      { "color": "yellow",  "category": "hue",  "type": "primary", "code": "#FF0" },
      { "color": "green", "category": "hue", "type": "secondary",  "code": "#0F0"},
    ];
    
    vm.customers = [
      {"Full Name":"James Smith","Street":"123 Gold St","City":"Manhattan","State":"NY","Zip Code":10038},
      {"Full Name":"Michael Smith","Street":"49 Fulton St","City":"Manhattan","State":"NY","Zip Code":10037},
      {"Full Name":"Maria Garcia","Street":"29-23 Flushing","City":"Queens","State":"NY","Zip Code":12003},
      {"Full Name":"David Smith","Street":"703 34 St","City":"Down Manhattan","State":"NY","Zip Code":10027},
      {"Full Name":"Maria Rodriguez","Street":"42-129 4th St","City":"Manhattan","State":"NY","Zip Code":10035},
      {"Full Name":"Maria Hernandez","Street":"934-28 9th St","City":"Manhattan","State":"NY","Zip Code":10033}
    ];
    
    vm.products =  [
      { "ID": 100, "Product": "Pepsi", "Price": 1.2, "Quantity": 1000 },
      { "ID": 101, "Product": "Mirinda", "Price": 1.17, "Quantity": 500 },
      { "ID": 102, "Product": "Fayrouz", "Price": 2.0, "Quantity": 700 },
      { "ID": 103, "Product": "Mountain Dew", "Price": 1.25, "Quantity": 1500 }
    ];
    
   
  })
  
})();
/* Styles go here */