I am trying to use Plunkr to do some experimenting with some issues I am having with md-selects in my production app. When I create the plunkr, the md-select looks nothing like what it looks like in the app. What am I doing wrong?
<head>
<!-- Angular Material CSS now available via Google CDN; version 0.9.4 used here -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>
<body ng-app=YourApp>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.9.4 used here -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<script>
// Include app dependency on ngMaterial
angular.module( 'YourApp', ['ngMaterial'] )
.controller("YourController", function($scope){
$scope.options = ['1', '2', '3'];
} );
</script>
<div ng-controller="YourController">
<md-input-container>
<md-select>
<md-option ng-repeat="option in options">
{{option}}
</md-option>
</md-select>
</md-input-container>
</div>
</body>
md-select
requires an ng-model. You'll notice in the console there's a $compile:ctreq which is indicating that a required controller is missing. Once I added that, the errors went away but the options in the drop down were blank. I added a {{option}}
in the md-option element and everything is happy.
Here's a working example
<!DOCTYPE html>
<html>
<head>
<!-- Angular Material CSS now available via Google CDN; version 0.9.4 used here -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>
<body ng-app=YourApp>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.9.4 used here -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<script>
// Include app dependency on ngMaterial
angular.module( 'YourApp', ['ngMaterial'] )
.controller("YourController", function($scope){
$scope.options = ['1', '2', '3'];
} );
</script>
<div ng-controller="YourController">
<md-input-container>
<md-select ng-model="myModel">
<md-option ng-repeat="option in options">
{{option}}
</md-option>
</md-select>
</md-input-container>
</div>
</body>
</html>