<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.9.7/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-messages.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.5/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
<md-input-container>
<label>Difficulty</label>
<md-select ng-model="difficulty">
<md-option ng-value="opt" ng-repeat="opt in difficulties" ng-click="update(opt)">
{{opt.Name}}
</md-option>
</md-select>
</md-input-container>
</div>
</body>
</html>
var app = angular
.module('myApp', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages'])
.controller('myController', function ($scope) {
$scope.difficulties = [{DifficultyID: 1, Name: "Easy"}, {DifficultyID: 2, Name: "Medium"}, {DifficultyID: 3, Name: "Hard"}];
$scope.update = function(opt){
console.log(opt.Name)
}
});
md-input-container > md-select {
margin-top: 0;
padding-bottom: 0; }
md-input-container > md-select > md-select-label {
width: 100%; }
md-input-container > md-radio-group {
padding: 24px 2px 0; }
md-input-container > md-radio-group > md-radio-button {
margin: 8px 5px 0;
display: inline-block; }