AngularUI Bootstrap Typeahead: Async items loading with $resource

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular-resource.js"></script>
    <script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body ng-app="plunker">
    <alert type="'info'" >Typeahead from  <a href="http://angular-ui.github.com/bootstrap/">http://angular-ui.github.com/bootstrap/</a>"</alert>
    <div class='container-fluid' ng-controller="TypeaheadCtrl">
        <pre>Model: {{result | json}}</pre>
        <input type="text" ng-model="result" typeahead="suggestion for suggestion in cities($viewValue)">
    </div>
  </body>
</html>

var app = angular.module('plunker', ['ui.bootstrap', 'ngResource']);

app.factory('dataProviderService', ['$resource', function ($resource) {
  return $resource('http://gd.geobytes.com/AutoCompleteCity?callback=JSON_CALLBACK&filter=US',
          {},
          {lookup: {method: 'JSONP', isArray: true}}
  );
}]);

app.controller('TypeaheadCtrl', ['$scope', '$log', 'dataProviderService', function($scope, $log, dataProviderService) {
  $scope.cities = function(prefix) {
    var p = dataProviderService.lookup({q: prefix}).$promise;
    p.then(function(response){
      $log.info('Got it!');
      return response.data;
    });
    return p;
  };
}]);