JSFiddle - React, Tailwind, and code Playground

by BootstrapOrBust

HTML

<section ng-controller="Ctrl as loc">	
    <select class="form-control">
                                                                                   
        <option>Choose Place</option>
        <option value="DC">DC</option>
        <option value="NY">NY</option>
    </select>
</section>

...
...
...

 <div class="DC">
     <table class="table">
         <thead>
             <tr>
                 <th>Location</th>
             </tr>
         </thead>
         <tbody>
             <tr>
                 <td><a href="#">Metro</a></td>
             </tr>
             <tr>
                 <td><a href="#">Capital</a></td>
             </tr>
         </tbody>
     </table>
</div>

 <div class="NY">
     <table class="table">
         <thead>
             <tr>
                 <th>Location</th>
             </tr>
         </thead>
         <tbody>
             <tr>
                 <td><a href="#">Subway</a></td>
             </tr>
             <tr>
                 <td><a href="#">Yankees</a></td>
             </tr>
         </tbody>
     </table>
</div>

JavaScript

(function(){
"use strict";
angular.module('test').controller('Ctrl', function ($scope) {
	
	this.setTab = function(setTab) {
		this.tab = setTab;
	};
	
	this.isSelected = function(checkTab) {
		return this.tab === checkTab;
	};
	
	this.notSelected = function(checkTab) {
		return !(this.isSelected(checkTab));
	};
	
	this.getTab = function() {
		return this.tab;
	};
	
	this.setIsDefault = function() {
		this.isDefault = true;
	};
	
	this.getIsDefault = function() {
		return this.isDefault;
	};
 });
})();