Angularjs Bootstrap to Material - angularjs

Question

I am changing the UI code from bootstrap to material. I am using angularjs and material 1.1.20. I do not know angularjs but would like to learn. Please see the code I need to change to angularjs material below.
I know that md-select does not accept ng-options, but I do not have any idea how I can change it to work with md-select tag.
My background is designing HTML CSS but I want to learn more js and angular etc.
<div class="col-md-12 col-no-pad">
<div class="input-group">
<span class="input-group-addon" id="LANGUAGE">Language</span>
<select name="LANGUAGE" class="form-control" tabindex="8"
ng-init="LANGUAGE = null"
ng-model="LANGUAGE"
ng-options="language.KEYID as language.DESC for language in languages">
<option value="">-Select One-</option>
</select>
</div>
js:
dataService.getAll('language').then(function(data) {
$scope.languages = data.data;
});
I want it to work as an angularjs material dropdown.

Answer 1

You need to use ng-repeat on <md-option>. Check the snippet below.
angular.module('myApp', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.languages = [{
desc: 'English',
keyid: 1,
position: 5
}, {
desc: 'Italian',
keyid: 2,
position: null
}, {
desc: 'Spanish',
keyid: 3,
position: 43
}, {
desc: 'Malayalam',
keyid: 4,
position: 8
}];
});
md-input-container {
min-width: 50%;
}
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<div ng-app="myApp" ng-cloak ng-controller="AppCtrl as ctrl">
<md-input-container>
<label>Languages</label>
<md-select ng-model="languageSelected">
<md-option ng-repeat="item in languages" ng-value="item.keyid">
{{ item.desc }}
</md-option>
</md-select>
</md-input-container>
<div>Your selection: {{ languageSelected || '--' }}</div>
<div ng-repeat="item in languages" ng-if="item.keyid == languageSelected">
<div>desc: {{ item.desc || '--' }}</div>
<div>position: {{ item.position || '--' }}</div>
<div>keyid: {{ item.keyid || '--' }}</div>
</div>
</div>