<!DOCTYPE html>
<html ng-app="angularJsSelect">
<head>
<link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>AngularJS with select and ng-repeat!</h1>
<div ng-repeat="i in items">
<div class="panel panel-default">
<div class="panel-body">
<label>{{i.id}}</label>
<input ng-model="i.title"/>
<select ng-model="defaultSelectedVAT">
<option value="">--- Select an option ---</option>
<option ng-selected= "{{value.id == defaultSelectedVAT}}" ng-repeat="value in vatRates"
value="{{value.id}}">{{value.value}}
</option>
</select>
</div>
</div>
</div>
</body>
</html>
var app = angular.module('angularJsSelect', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [{'type' : 'settings'}, {'type':'home'}, {'type':'other'}];
$scope.selection = $scope.items[0];
$scope.items = [
{ 'id': 1, 'title' : 'Title1', 'vatRateId' : '1' },
{ 'id': 2, 'title' : 'Title2', 'vatRateId' : '2' },
{ 'id': 3, 'title' : 'Title3', 'vatRateId' : '3' }
];
$scope.vatRates = [
{ 'id': 1, 'value' : '20' },
{ 'id': 2, 'value' : '10' },
{ 'id': 3, 'value' : '7' }
];
$scope.defaultSelectedVAT = $scope.vatRates[1].id;
alert("defaultselectedvalue:" + $scope.defaultSelectedVAT)
});
/* Styles go here */