Why isn't this list populating with data? - angularjs

Question

I am using angular and the data is coming back from my api call. The problem is my list is not populating.
first partial:
<div ng-controller="CustomerController" data-ng-init="init()" class="col-md-2">
<select ng-model="customerKey" ng-options="customer.Key as customer.Value for customer in customers"></select>
</div>
second partial:
<div ng-controller="CustomerController">
<div class="col-md-2 col-md-offset-5" style="outline: 1px solid black; margin-top: 1%">
<div class="text-center">
<div class="radio-inline" ng-repeat="customerOption in customerOptions">
<input type="radio" id="{{customerOption.Value}}" name="customer" ng-change="getCustomers(customerType)" ng-model="customerType" ng-value="customerOption.Key" ng-checked="customerOption.Checked" />{{customerOption.Value}}
</div>
</div>
</div>
</div>
Controller:
var customer = angular.module('customer', []);
customer.controller('CustomerController', [
"$scope", "customerService",
function($scope, customerService) {
$scope.customerOptions = CustomerOptions;
$scope.getCustomers = function(customerType) {
$scope.showContent = false;
customerService.get(customerType).then(function (data) {
$scope.customers = data;
});
};
$scope.init = function() {
$scope.getCustomers("1");
}
}
]);
service:
app.service('customerService', [
"$http", function ($http) {
this.get = function(customerType) {
var customers;
if (customerType == "1") {
getProduction().then(function(result) { customers = result.data; });
} else if (customerType == "2") {
getTest().then(function(result) { customers = result.data; });
} else {
getAll().then(function(result) { customers = result.data; });
}
return customers;
};
var getTest = function () {
return $http({
method: "GET",
url: "api/Customer/GetTest",
})
.success(function (data) {
return data;
});
};
var getProduction = function () {
return $http({
method: "GET",
url: "api/Customer/GetProduction",
})
.success(function (data) {
return data;
});
};
var getAll = function () {
return $http({
method: "GET",
url: "api/Customer/GetAll",
})
.success(function (data) {
return data;
});
};
}
]);
If you click on any of the radio buttons, they return the appropriate list to the service function; however, I cannot get the select list to populate with that data

Answer 1

The problem is that the service is returning customers object instead of promise, which the controller method is looking for.
It should work if you return the promise from the service and leave the success/error handling to the controller.
app.service('customerService', [
"$http", function ($http) {
this.get = function(customerType) {
var customers;
if (customerType == "1") {
return getProduction();
} else if (customerType == "2") {
return getTest();
} else {
return getAll();
}
};
Controller:
$scope.getCustomers = function(customerType) {
$scope.showContent = false;
customerService.get(customerType).then(function (results) {
$scope.customers = results.data;
});
};

Answer 2

The then handlers in your customerService get() method are assigning the results of the HTTP call to a local customers variable, but this accomplishes nothing. By the time that happens, customers has already been returned to the caller as undefined, and you are most likely getting an error when you call then() on that value.
You need to return a promise from get() and the then() handlers inside get() need to have return statements in them:
this.get = function(customerType) {
if (customerType == "1") {
return getProduction().then(function(result) { return result.data; });
} else if (customerType == "2") {
return getTest().then(function(result) { return result.data; });
} else {
return getAll().then(function(result) { return result.data; });
}
};
There is quite a bit of duplication here, and this can be consolidated:
this.get = function(customerType) {
var customerPromise =
(customerType === "1") ? getProduction()
: (customerType === "2") ? getTest() : getAll();
return customerPromise.then(function (result) { return result.data; });
};