Populating a dropdownlist with AngularJS - angularjs

Question

I want to populate a dropdownlist with values from a table I created called Venues. This table has only two things in it, the Venue Id and Name.
I created a Code First Entity Data Model from the database that holds the table Venues and I created this method in my controller:
public JsonResult GetVenues()
{
using (ReservationsModel dc = new ReservationsModel())
{
var v = dc.Venues.OrderBy(a => a.Name).ToList();
return new JsonResult { Data = v, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
then in my script i added:
$scope.selectedVenue = null;
$scope.venues = [];
$http.get("/home/getvenues").success(function (data) {
angular.forEach(data, function (item) {
venues.push(item.Name);
});
$scope.list = venues;
}).error(function (status) {
alert(status);
});
$scope.selectedVenue = $scope.venues[i].Name;
and in my view I have:
<select ng-model="selectedVenue" ng-options="item in venues">
<option value="">-- Select Venue --</option>
</select>
I came from these guides:
http://www.dotnetawesome.com/2016/04/implement-event-scheduler-calendar-angularjs.html
How can I populate a select dropdown list from a JSON feed with AngularJS?
https://jsfiddle.net/pravinmagar/Ljgk8oy0/

Answer 1

Let's see your code.(check the comments)
$scope.selectedVenue = null;
$scope.venues = [];
$http.get("/home/getvenues").success(function (data) {
angular.forEach(data, function (item) {
// this should be $scope.venues, not just venues
venues.push(item.Name);
});
// you don't need another scope variable
$scope.list = venues;
}).error(function (status) {
alert(status);
});
// as $scope.venues is an array of Names, $scope.selectedVenue = $scope.venues[i] is enough
$scope.selectedVenue = $scope.venues[i].Name;
So,
$scope.venues = [];
$http.get("/home/getvenues").success(function (data) {
angular.forEach(data, function (item) {
$scope.venues.push(item.Name);
});
}).error(function (status) {
alert(status);
});
// if i has declared a value somewhere in your code, then
$scope.selectedVenue = $scope.venues[i];
and in template,
<select ng-model="selectedVenue">
<option value="">Select Venue</option>
<option ng-repeat="venue in venues" ng-value="venue">{{venue}}</option>
</select>

Answer 2

Your html part is ok, just need following modification in controller JS:
access venues like $scope.venues while pushing
assign default selected inside .success because http.get() is async.
Code:
$scope.selectedVenue = null;
$scope.venues = [];
$http.get("/home/getvenues").success(function (data) {
angular.forEach(data, function (item) {
$scope.venues.push(item.Name);
});
$scope.selectedVenue = $scope.venues[i].Name; // i must be declared in your js
}).error(function (status) {
alert(status);
});