Despite researching numerous examples, I am still struggling to understand how to achieve this. I have set up a basic Angular app with a controller and am attempting to fill a single select tag.
<body data-ng-app="App">
<div data-ng-controller="DemoController">
{{var}}
<select data-ng-options="v.id as v.name for v in selectVals">
<option value="">Select</option>
</select>
</div>
</body>
angular.module('App', []).controller('DemoController', function($scope) {
$scope.var = 'a';
$scope.selectVals = [
{ name: '1st', id: 1 },
{ name: '2nd', id: 2 }
];
});
For reference, here is the jsFiddle link: http://jsfiddle.net/Fc5ne/3/. Any assistance on this matter would be highly appreciated.
I have already checked various sources and compared my code, but I seem to be overlooking something important. Some of the resources I consulted include: AngularJS API Documentation for Select Directive, http://jsfiddle.net/qWzTb/, http://jsfiddle.net/qm7E7/19/, Angular: Binding objects to Select, among others from Stack Overflow.