Bind (Populate) DropDownList using WebMethod and AngularJS in ASP.Net

Hi Nishu,

Check this example. Now please take its reference and correct your code.

In the example i have populated the List with dummy data. You need to populate the List from Database.

HTML

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', []);
    app.controller('MyController', function ($scope, $http) {
        var post = $http({
            method: "POST",
            url: "Default.aspx/GetLocations",
            dataType: 'json',
            data: {},
            headers: { "Content-Type": "application/json" }
        });

        post.success(function (response) {
            $scope.Locations = response.d;
        });
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <select>
        <option value="0" label="Select"></option>
        <option ng-repeat="dataloc in Locations" value="{{dataloc.Value}}">{{dataloc.Text}}
        </option>
    </select>
</div>

Code

C#

[System.Web.Services.WebMethod()]
public static List<object> GetLocations()
{
    // Bind list from Database.
    List<object> dataloc = new List<object>();
    dataloc.Add(new { Value = "1", Text = "Location 1" });
    dataloc.Add(new { Value = "2", Text = "Location 2" });
    dataloc.Add(new { Value = "3", Text = "Location 3" });
    dataloc.Add(new { Value = "4", Text = "Location 4" });

    return dataloc;
}

VB.Net

<System.Web.Services.WebMethod()>
Public Shared Function GetLocations() As List(Of Object)
    ' Bind list from Database.
    Dim dataloc As List(Of Object) = New List(Of Object)()
    dataloc.Add(New With {.Value = "1", .Text = "Location 1"})
    dataloc.Add(New With {.Value = "2", .Text = "Location 2"})
    dataloc.Add(New With {.Value = "3", .Text = "Location 3"})
    dataloc.Add(New With {.Value = "4", .Text = "Location 4"})
    Return dataloc
End Function

Screenshot