Bind server data to dropdown/HTML select control using angularJS

This example shows you how to bind the server data (By calling webmethod. In this example we are returning Country List in JSON format, in the same way you can fetch the data from SQL server and return it as JSON data) and bind it to dropdown/HTML select control using angularJS.

<select ng-options="Country.CountryName for Country in CountryList" ng-model="selectedCountry"> </select>
Where CountryList is the JSON result from server. Country.CountryName -> will bind the country name to select options text and CountryID binds to select options value.

Fill HTML select

ASPX Page:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Binddropdown.aspx.cs" Inherits="Binddropdown" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head runat="server"> <title></title> <script src=""></script> </head> <body> <form id="form1" runat="server"> <div ng-app="myApp" ng-controller="myCntrl"> <input type="button" id="btnFillCountries" value="Fill Country List" ng-click="fillCountryList()" /> <br /><br /> Country List : <select ng-options="Country.CountryName for Country in CountryList" ng-model="selectedCountry"> </select> <script> var app = angular.module("myApp", []); app.controller("myCntrl", function ($scope, $http) { $scope.CountryList; $scope.fillCountryList = function () { var httpreq = { method: 'POST', url: 'Binddropdown.aspx/GetCountyList', headers: { 'Content-Type': 'application/json; charset=utf-8', 'dataType': 'json' }, data: {} } $http(httpreq).success(function (response) { $scope.CountryList = response.d; alert("Completed."); }) }; }); </script> </div> </form> </body> </html>

CS Page:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class Binddropdown : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } [System.Web.Services.WebMethod()] public static List<CountryList> GetCountyList() { List<CountryList> list = new List<CountryList>(); list.Add(new CountryList(1,"India")); list.Add(new CountryList(2,"USA")); list.Add(new CountryList(3,"Canada")); list.Add(new CountryList(4, "Italy")); return list; } } public class CountryList { public int CountryID; public string CountryName; public CountryList(int _CountryID, string _CountryName) { CountryID = _CountryID; CountryName = _CountryName; } }