(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>