<!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
  }
}