JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/1.0.17/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js"></script>
<section ng-app="KobaApp" >
<body>
<div ng-controller="KobaCtrl">
<!--
	DataSync Issue so updates from Bill.com
	(how does it know which of the invoices to update)
	Create a function that pulls the database
	Creates an id for each. if they match up, update that relevant node
	Not sure how to update that relevant node, but take the comments of it previously 

	how to make a story and have multiple comments for each invoice


-->



    <!--
    	This creates a search through all the items
    	All you have to do is use ng-model and then 
    	pass it into the ng-repeat with filter: query

    	Apply ng-model directive to the tag that will query
    	and apply it as a filter to the list of data
    -->
	<div>
	<input ng-model="query">
	</div>


	<select ng-model="PaymentStatus.paymentStatus">
	<option value="0"> Paid</option>
	<option value="1"> Open</option>
	<option value="2"> Partial Payment</option>
	<option value="4"> Scheduled</option>
	</select>

	<select ng-model="Order">
	<option value="name"> Name</option>
	<option value="amount"> Amount</option>
	</select>

	<label>
	<input type="radio" ng-model="direction" name="direction" checked>
	ascending
	</label>
	<label>
	<input type="radio" ng-model="direction" name="direction" value="reverse">
	descending
	</label>

	<!--Loop through data for both id and item. id is necessary for adding comment-->
    <!--
    	You can add filters to the loop of the data in ng-repeat 
    	by just adding in the | and then the limitTo:5
    	e.g.
    	 <div ng-repeat="(id,item) in data | limitTo: 5">
    	 this doesnt work though
    -->

    <table >
       
    <!--
    	ADDING A LIST ELEMENT HERE FOR SEARCH CAPABILITY
    	This is where the list filter should go

   ...

CSS

table, td, th {
    border: 1px gray;
}

th {
	font-family: Arial;
    background-color: #F2F2F2;

}
table th:hover{
	background-color: #E0E0E0;
	text-decoration:bold;
}

JavaScript

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

KobaApp




    .factory("FirebaseService", ["$firebase", function ($firebase) {
    //var furl = "https://helloworldtest.firebaseio.com/";
     var furl = "https://asanacollections.firebaseio.com/Invoices";
    var ref = new Firebase(furl);
    return $firebase(ref);
}])


    //scope.data is an Object and not an array
    //unlike most scope.data objects that don't mind with firebase

    .controller('KobaCtrl', ["$scope", "FirebaseService", function ($scope, firebaseservice) {
    $scope.data = firebaseservice;




    $scope.CommentAdd = function (id,item) {
    	$scope.data.$save(id)
        var ref = new Firebase("https://helloworldtest.firebaseio.com/" + id +"/comments");
        $scope.comments = $firebase(ref);
        $scope.comments.$add({comment:item});


    }


}]);