<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
</head>
<body ng-app="plunker" ng-cloak>
<div ng-controller="MainCtrl">
<form name="myForm">
<label for="mySelect">Make a choice:</label>
<select name="mySelect" id="mySelect" ng-options="option.name for option in data.availableOptions track by option.id" ng-model="data.selectedOption"></select>
</form>
<hr>
<tt>option = {{data.selectedOption}}</tt>
</div>
</body>
</html>
import angular from 'angular';
angular.module('plunker', []).controller('MainCtrl', function($scope) {
$scope.data = {
availableOptions: [
{ id: '1', name: 'Option A', age: 18 },
{ id: '2', name: 'Option B', age: 19 },
{ id: '3', name: 'Option C', age: 20 }
],
selectedOption: { id: '1', name: 'Option B', age: 20 }
};
});
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}
h1,
p {
font-family: sans-serif;
}
{
"name": "@plnkr/starter-angularjs",
"version": "1.0.1",
"description": "AngularJS starter template",
"dependencies": {
"angular": "^1.6.9"
},
"plnkr": {
"runtime": "system",
"useHotReload": false
}
}