Populate drop down from database with Angular in .net

Problem

I'm attempting to learn ASP.net and Angular at the same time. What I want to do is display a list of states (which is retrieved in from a database) in a drop down list using Angular. I can get the states to display in a table. This is what I have:

My Controller function:

public ActionResult StateListDistinct()
{
    var distinctStates = (from w in db.Addresses
                              select new { State =    
w.address_state}).Distinct();

        List<string> states = db.Addresses.Select(state => state.address_state).Distinct().ToList();

        return View(states);

    }

My current View:

@model List<String>

<table class="table">

@foreach (var item in Model) {
    <tr>

        <td>
            @Html.DisplayFor(model => item)
        </td>

    </tr>
}

</table>

What do I need to do to get a drop down populated using Angular?

Problem courtesy of: user1024941

Solution

You can visit the below link for learning dropdown binding using AngularJs

http://techbrij.com/angularjs-cascade-dropdownlist-asp-net-mvc

You can also visit this link http://www.aspdotnet-suresh.com/2015/02/angularjs-bind-set-dropdownlist-value-text-using-ng-options-ng-repeat.html

Solution courtesy of: Moni Bhattacharya

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.