Why is the list not updating with the new data?

Question

I am using angular and the data is coming back from my api call. The problem is my list is not populating with the updated data.

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 the new data

Answer 1

The problem is here in your get function:

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;
    };

You are defining the customers var, and then you send out an asynchronous request and returning the still undefined customers, since getProduction()/getTest()/getAll() are all asynchronous.

You should have your get function return a promise, and resolve the inner async functions based on success/error:

this.get = function(customerType) {

        var deferred = this.$q.defer();

        var customers;
        if (customerType == "1") {
            getProduction().success(function(result) { return deferred.resolve(result); })
                           .error(function(e) { return deferred.reject(e); });
        } else if (customerType == "2") {
            getTest().success(function(result) { return deferred.resolve(result); })
                     .error(function(e) { return deferred.reject(e); });
        } else {
            getAll().success(function(result) { return deferred.resolve(result); })
                    .error(function(e) { return deferred.reject(e); });
        }
        return deferred.promise;
    };

Finally, since I added the .success/.error in the get function, you can remove it from each of the get***() functions so they'll look like this:

var getAll = function () {
        return $http({
            method: "GET",
            url: "api/Customer/GetAll",
        });
    };