Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Bind Dropdown using AngularJS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 331
    Comment on it

    Hi All,

    This log will help you to bind data to dropdown/html select control using AngularJS. Data is populated using webmethod.

    <select ng-options="Country.CountryName for Country in CountryList" ng-model="selectedCountry">

    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.

    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">
        <script src=""></script>
        <form id="form1" runat="server">
        <div ng-app="myApp" ng-controller="myCntrl">
            <div ng-init="fillCountryList()"></div>
            Country List :
            <select ng-options="Country.CountryName for Country in CountryList" ng-model="selectedCountry">
                var app = angular.module("myApp", []);
                app.controller("myCntrl", function ($scope, $http) {
                    $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;

    C# Code:

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


    Happy Coding.....

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: