Get attributes associated with a selected item in a drop down list AngularJS - angularjs

Question

I'm building an app using ASP.NET Web API with AngularJS and I'm new to these frameworks. I have a drop down list which display data from the API. When I select an element from the drop down, I want to get the other attributes associated with it.
Here's the API
[Route("CustomerRecords")]
public List<Customer> Get()
{
return new List<Customer>()
{
new Customer { CID=1, Name="Bruce Wayne", PIN="1234", Bal=1000000, cardStatus= 0 }
,new Customer { CID=2, Name="Tony Stark", PIN="2246", Bal=900000, cardStatus= 0 }
,new Customer { CID=3, Name="Jon Snow", PIN="2398", Bal=3000, cardStatus= 1 }
,new Customer { CID=4, Name="Rustin Cohle", PIN="7549", Bal=450000, cardStatus= 2 }
};
}
}
public class Customer
{
public int CID { get; set; }
public string Name { get; set; }
public string PIN { get; set; }
public int Bal { get; set; }
public int cardStatus { get; set; }
}
here's the module, the service and the factory method
var customerAppModule = angular.module("customerApp", []);
customerAppModule.controller('CustomerCtrl', function ($scope, CustomerService)
{
getCustomerRecords();
function getCustomerRecords() {
CustomerService.getCustomers()
.success(function (data) {
console.log(data);
$scope.customers = data;
})
.error(function (data, status) {
console.error('failure loading the customer record', status, data);
$scope.customers = {};
});
}
});
customerAppModule.factory('CustomerService', ['$http', function ($http) {
var customerService = {};
var urlBase = 'http://localhost:51701/Customer';
customerService.getCustomers = function () {
return $http.get(urlBase + '/CustomerRecords');
};
return customerService;
}]);
and here is my drop down
<select ng-change="getCustomers(details)" ng-model="details">
<option ng-repeat="customer in customers" value="{{customer.CID}}">{{customer.Name}}</option>
</select>
So, only the names appear in my drop down, but if I select a particular name, I want to be able to get its other attributes

Answer 1

Your function getCustomers inside the controller should have all the details as a parameter, since you are passing it,
$scope.getCustomers = function(details){
//this has all the details associated with id (details);
}

Answer 2

use select.js library and try like following
<ui-select ng-model="model" append-to-body="true">
<ui-select-match>
<span ng-bind="$select.selected.name"></span>
</ui-select-match>
<ui-select-choices repeat="item in modelList" >
<div ng-bind="item.name" ng-click="selectValue(item)"></div>
</ui-select-choices>
</ui-select>