var app = angular.module('plunker', ['ngMaterial']);
app.controller('MainCtrl', function($scope) {
$scope.impacts = {
availableImpacts: [{
id: '1',
name: 'name1'
}, {
id: '2',
name: 'name2'
}, {
id: '3',
name: 'name3'
}],
};
console.log($scope.selectedImpact);
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="https://material.angularjs.org/1.0.6/docs.css" />
<!-- Angular Material CSS using GitCDN to load directly from `bower-material/master` -->
<link rel="stylesheet" href="https://gitcdn.link/repo/angular/bower-material/master/angular-material.css">
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script>
<!-- Angular Material Javascript using GitCDN to load directly from `bower-material/master` -->
<script src="https://gitcdn.link/repo/angular/bower-material/master/angular-material.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<md-input-container>
<label>impact</label>
<md-select ng-model="selectedImpact">
<md-option ng-repeat="impact in impacts.availableImpacts" value="{{impact.name}}">
{{impact.name}}
</md-option>
</md-select>
</md-input-container>
</body>
</html>
/* Put your css in here */