Edit in JSFiddle

(function(){
  /* Todo: fix performance */
    angular.module('app', [])
        .controller('mainCtrl', function($scope){
            $scope.countries = [ 
                { country: 'Japan', language: 'Japanese' },
                { 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'}
                          ];
            /* show loading indicator */
            $scope.loading = false;
            $scope.$watch('searchQuery', function(x,y){
              if(x !== y) $scope.loading = true;
            });
            
            $scope.$watch('searchQuery', _.debounce(function(newV, oldV){
              if(newV == oldV) return;

              $scope.$apply(function(){
                  updateQuery();
                  $scope.loading = false;
              });

            }, 1000));


              var updateQuery = function() {
                $scope.search = $scope.searchQuery;
                highlightInput('searchField');
              };
            
              //hightlight the text
              var highlightInput = function(id) {
                 document.getElementById(id).select();
              };
     });
  
          
})();
<div ng-app="app">
<div ng-controller="mainCtrl">
    <input id="searchField" type="search" ng-model="searchQuery" placeholder="search" />{{ loading ? "loading..." : "" }}
    <div ng-repeat="c in countries | filter:search">{{c.country}} - {{c.language}}</div>
</div>
</div>