How to use md-select using array data?

Question

I am using angularjs and angular material to design my web page. I am unable to show the values of option present in an array.

My index.html

<md-input-container class="md-block" flex-gt-sm>
  <label>Level</label>
  {{levels|json}}
  <ul>
      <li ng-repeat="level in levels"> {{level.name}}</li><!--this is working-->
  </ul>
  <md-select ng-model="news.level">
       <md-option ng-repeat="level in levels"ng-value="level.name">
         {{level.name}}
        </md-option><!--this is not working-->
  </md-select>
</md-input-container>

And in the controller I have

$scope.levels=['Level one', 'Level two','Level Three'];

Please help what could possibly be wrong and also let me know of any suggestion to this problem.

Answer 1

Here you go - CodePen

Markup

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
  <md-input-container class="md-block" flex-gt-sm>
    <label>Level</label>
    <ul>
      <li ng-repeat="level in levels"> {{level.name}}</li>
    </ul>
    <md-select ng-model="news.level">
      <md-option ng-repeat="level in levels" ng-value="level.name">
        {{level.name}}
      </md-option>
    </md-select>
  </md-input-container>
</div>

JS

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache', 'ngDialog'])

.controller('AppCtrl', function($scope) {
  $scope.levels = [{name:'Level one'}, {name:'Level two'}, {name:'Level Three'}];
});