Why isn't md-select working in my Plunkr?

Question

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?

Plunkr

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

score 1 · Accepted Answer · answered May 20 '16 at 22:24

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>

Why isn't md-select working in my Plunkr?

1 Answers1