JSFiddle - React, Tailwind, and code Playground

No debounce ng repeat

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<div ng-app="app">
    <div ng-controller="mainCtrl">
        <input type="search" ng-model="searchQuery" placeholder="search" />
        {{ loading ? "loading..." : "" }}
        <div ng-repeat="c in countries | filter:searchQuery">{{c.country}} - {{c.language}}</div>
    </div>
</div>

JavaScript

(function(){
  /* Todo: fix performance */
    angular.module('app', [])
        .controller('mainCtrl', function($scope){
            $scope.countries = [ 
                { country: '口アクション一覧', language: 'アクション一覧' },
                { country: 'Korea', language: 'Korean' },
                { country: 'North Korea', language: 'Korean'},
                { country: 'China', language: 'Chinese'},
                { country: 'Hong Kong', language: 'Cantonese'},
                { country: 'Sinagpore', language: 'English'},
                { country: 'Thailand', language: 'Thai'},
                { country: 'Malaysia', language: 'Malay'},
                { country: 'Brunei', language: 'Malay'}
                          ];
           
     });        
})();