AngularJS instant search - Autocomplete input

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <title>Auto Complete Searchbar Demo</title>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" data-semver="3.2.0" data-require="bootstrap-css@*" />
  <link data-require="font-awesome@4.2.0" data-semver="4.2.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" />
  <link href="style.css" rel="stylesheet" />
  <script src="//code.angularjs.org/1.3.1/angular.js" data-semver="1.3.1" data-require="angular.js@*"></script>
  <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js" data-semver="0.10.0" data-require="angular-ui-bootstrap@0.10.0"></script>
  <script src="myController.js"></script>
  <script src="usersData.js"></script>
</head>

<body ng-controller="myController">
  <br>
  <div class="input-group searchfield" style="padding:10px;">
    <span class="input-group-addon"><i class="fa" ng-class="{true:'fa-spinner fa-spin', false:'fa-search'}[loading]"></i></span>
    <input type="text" typeahead-on-select='onSelect($item)' placeholder="Select User" class="form-control ng-valid ng-dirty" typeahead="user.name for user in users($viewValue)" ng-model="selecting" typeahead-wait-ms="delay" aria-autocomplete="list">
  </div>
  <span ng-hide="selected">You have not selected any user yet.</span>
  <span ng-show="selected">You have selected <strong>{{selected.name}}</strong> - age {{selected.age}}</span>
</body>

</html>

/* Styles go here */

.searchfield > ul{
  width: 94%;
}
.searchfield > input{
  border-bottom-right-radius: 3px !important;
  border-top-right-radius: 3px !important;
}

var myApp = angular.module("myApp", ['ui.bootstrap']);
myApp.controller("myController", ['$scope', '$timeout', 'usersData',
  function($scope, $timeout, usersData) {
    var minLength = 3;
    $scope.loading = false;
    
    $scope.delay = 500;

    $scope.onSelect = function(user){
      $scope.selected = user;
    };
    $scope.users = function(userName) {
      if (userName.length < minLength) {
        return [];
      }
      $scope.loading = true;
      return usersData.getUsers(userName).then(function(data){
        $scope.loading = false;
        return data;
      }, function(status){
        $scope.loading = false;
      });
    };
  }
]);

myApp.factory('usersData', function($http, $q){
  return {
    getUsers: function(query){
      var deffered = $q.defer();
      
      $http.jsonp('http://code.theraaz.com/example/users.php?callback=JSON_CALLBACK', {params : {query:query}})
        .success(function(data){
          deffered.resolve(data); 
        })
        .error(function(data, status){
          deffered.reject(status);
        });
        
      return deffered.promise;
    }
  }
});