Populate and set DropDownList selected value using AngularJS in ASP.Net MVC

Hi SUJAYS,

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

I am binding the record from DataTable. You need to bind the record from database.

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetSingleType()
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] { new DataColumn("TypeId"), new DataColumn("Type") });
        dt.Rows.Add(1, "None");
        dt.Rows.Add(2, "Radio");
        dt.Rows.Add(3, "GPS");
        dt.Rows.Add(4, "Cell-Phone");
        var type = dt.AsEnumerable().Take(1)
                        .Select(x => new { Text = x["Type"], Value = x["TypeId"] }).ToList();
        return Json(type, JsonRequestBehavior.AllowGet);
    }

    public JsonResult GetAllType()
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] { new DataColumn("TypeId"), new DataColumn("Type") });
        dt.Rows.Add(1, "None");
        dt.Rows.Add(2, "Radio");
        dt.Rows.Add(3, "GPS");
        dt.Rows.Add(4, "Cell-Phone");
        var types = dt.AsEnumerable()
                        .Select(x => new { Text = x["Type"], Value = x["TypeId"] }).ToList();
        return Json(types, JsonRequestBehavior.AllowGet);
    }
}

View

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function ($scope, $http, $window) {
        $scope.GetAllType = function () {
            // Bind Single row.
            $http.get("/Home/GetSingleType").then(function (response) {
                $scope.INGEntities3 = response.data;
                // Set selected value.
                $scope.selectedValue = "1";
            }, function (response) { alert(response.responseText); });
            // Bind All rows.
            $http.get("/Home/GetAllType").then(function (response) {
                $scope.INGEntities = response.data;
                // Set selected value.
                $scope.selectedItemvalue = "1";
            }, function (response) { alert(response.responseText); });
        }
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <input type="text" placeholder="Enter tracking number" />
    <input type="button" ng-click="GetAllType()" value="Generate" />
    <br />
    Single Type:
    <select name="Type">
        <option value="0">Select a Type</option>
        <option ng-repeat="item in INGEntities3" ng-selected="selectedValue == item.Value"
            value="{{item.Value}}">{{item.Text}} </option>
    </select>
    All Type:
    <select name="Type" id="ddlType">
        <option value="0">Select a Type</option>
        <option ng-repeat="item in INGEntities" ng-selected="selectedItemvalue == item.Value"
            value="{{item.Value}}">{{item.Text}} </option>
    </select>
</div>

Screenshot

I have created like this. Now its working fine

    $scope.generate = function () {
        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth() + 1; //January is 0!
        var hh = today.getHours();
        var mn = today.getMinutes();
        var ss = today.getSeconds();
        var yyyy = today.getFullYear();
        if (dd < 10) {
            dd = '0' + dd;
        }
        if (mm < 10) {
            mm = '0' + mm;
        }
        var today1 = 'PTS' + dd + mm + yyyy + hh + mn + ss;
        $scope.tracking = today1;
        $scope.Description = 'name'

        $http({
            method: "get",
            url: "http://localhost:64137/Parcel/GetSingleType",
        }).then(function (response) {
            $scope.JOINGEntities3 = response.data;
            var customers = response.data;
            var ddlCustomers = document.getElementById("ddlSingleType");

            //Add the Options to the DropDownList.
            for (var i = 0; i < customers.length; i++) {
                var option = document.createElement("OPTION");

                //Set Customer Name in Text part.
                option.innerHTML = customers[i].Description;
              
                //Set CustomerId in Value part.
                option.value = customers[i].SingleType1;

                //Add the Option element to DropDownList.
                ddlCustomers.options.add(option);

               
            }
         
            $scope.pack = customers[0].PackageType1;
        }, function () {
            alert("Error Occur");
        })