AngularJS Example

by jzbruno

HTML

<div ng-app="">
  <div ng-controller="Controller">
    <input type="text" ng-model="query" ng-change="queryOnServer()" />
    <ul>
        <li ng-repeat="result in results">{{result}}</li>              
    </ul>
  </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<style>
.ng-invalid { border: 1px solid red; }

JavaScript

function Controller($scope, $timeout) {
    
    $scope.query = '';
    $scope.results = [];
    
    var promise = null;
    
    $scope.queryOnServer = function() {
        
        if (promise != null) {
            $timeout.cancel(promise);
            promise = null;
        }
        
        promise = $timeout(function () {
            $scope.results.push('Another XHR call....');
        }, 1000);
    };
}