javascript - typeaheadjs & bloodhound binding to id but display value

Question

Basically I am trying to use Bloodhound to parse out an array of json objects but every time I select the suggestion it displays the id field instead of the name field.

var services = [
    {"id":"1","name":"CI","created_at":"2014-12-17 21:21:36","updated_at":"2014-12-17 21:21:36"},
    {"id":"2","name":"DI","created_at":"2014-12-17 21:21:36","updated_at":"2014-12-17 21:21:36"},
    {"id":"3","name":"Message","created_at":"2014-12-17 21:21:36","updated_at":"2014-12-17 21:21:36"},
    {"id":"4","name":"Oracle","created_at":"2014-12-17 21:21:36","updated_at":"2014-12-17 21:21:36"},
    {"id":"5","name":"SAP Oracle","created_at":"2014-12-17 21:21:36","updated_at":"2014-12-17 21:21:36"},
    {"id":"6","name":"Other","created_at":"2014-12-17 21:21:36","updated_at":"2014-12-17 21:21:36"}
]; 

var Services = new Bloodhound({

datumTokenizer: function(services){
  return Bloodhound.tokenizers.whitespace(services.name)
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: services

});

Services.initialize();

$('#services').tagsinput({

typeaheadjs: {
  minLength: 1,
  highlight: true,
  name: 'services',
  displayKey: 'name',
  valueKey: 'id',
  source: Services.ttAdapter()
}
});