Loading select options from remote site using angularjs

Question

My html:

<div id="body" ng-controller="ClientController">    
    <select kendo-drop-down-list>
        <option data-ng-repeat="client in Clients">{{ client.Name }}</option>
    </select>
    <button data-ng-click="loadClients()">Load Clients</button>
    <pre>http response data: {{ data }}</pre>
</div>

@Scripts.Render("~/bundles/index")

And my javascript:

function ClientController($scope, $http) {
    $scope.url = "/tracker/api/client";
    $scope.selectedClient = null;
    $scope.Clients = null;
    $scope.loadClients = function () {
        $http.get($scope.url).then(function (response) {
            $scope.data = response.data;
            $scope.Clients = response.data;
        });
    };
 }

When I click the button, I retrieve a bunch of json from my webapi server- this data displays okay in the response data section- but my dropdown is always empty. The HTML page shows this:

<option value="? object:null ?"></option>

Which I take means I am not getting data set properly. I'm obviously an angular n00b :) what am I missing?

Answer 1

You should use the ng-options directive.

Example:

<select ng-model="selectedClient" ng-options="client.name for client in Clients">

Here is more info. The usage of ng-options is a bit different for arrays vs objects and there are a few different ways to use it, but there's a little somethin' for everyone: http://docs.angularjs.org/api/ng.directive:select