JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">    
    <div ng-controller="mainController as vm">
        
        <form ng-submit="vm.addCustomer()" novalidate>
            <input type="text" ng-model="vm.newCustomer" placeholder="Insert New Customer"></input>
            <input type="submit"></input>
        </form>
        
        
        <strong>All Customers</strong>
        <ul ng-repeat="name in vm.names">
            <li>{{name}}</li>
        </ul>
        
        <div ng-if="vm.owings.length">
            <strong>Customers who hasn't paid</strong>
            <ul ng-repeat="name in vm.owings">
                <li>{{name}}</li>
            </ul>
        </div>
    </div>
</div>

JavaScript

//myApp.module.js
(function() {
    'use strict';
    
    angular.module('myApp', []);
}());

//bill.service.js
(function() {
    'use strict';

    angular.module('myApp')
        .factory('billService', billService);
    
    billService.$inject = ['$log', '$q', '$timeout'];
    function billService($log, $q, $timeout) {
        var counter = 0;
        
        //fake customer repo
        //By default, nobody but James has paid
        var _customers = [
            { name: 'James', paid: true },
            { name: 'Tim', paid: false },
            { name: 'Alex', paid: false },
            { name: 'Sam', paid: false },
            { name: 'Kim', paid: false }
        ];
        
        var service = {
            getAllCustomers : getAllCustomers,
            getCustomersByCriteria: getCustomersByCriteria,
            addCustomerAndRefreshOwingList: addCustomerAndRefreshOwingList
        };
        
        return service;
        
        function getAllCustomers() {
            return $timeout(function() {
                var results =  _customers.map(function (c) { return c.name; });
                return results;
            }, 1000); //pretend network request lasting a second
        }
        
        function getCustomersByCriteria(criteria) {
            return $timeout(function() {
                var results = _customers
                    .filter(criteria)
                    .map(function(c) { return c.name; });
                
                return results;
            }, 1000); //pretend network request lasting a second
        }
        
        function addCustomerAndRefreshOwingList(customerName) {
            return $timeout(function() {                
                //persist the new customer to the data source
                _customers.push({ name: customerName, paid: false});
            }, 250) //pretend network request lasting 1/4 second
            .then(refreshOwingList);  //chain another promise to get the owing list <--...