How to make Angular Material <md-select> + UI Router view switcher?

Question

In a single page web app with AngularJS and UI Router , I would like to make an Angular Material <md-select>

that will switch between multiple views (aka ui-router "states").

Into this plunker I can do it using plain <select>

with ng-options , no Angular Material. Please note that the selected option is the <select>

same as the selected location.
In this other plunker , isolated from the above, assigned by Angular stuff, things don't work that well ☹ When viewed (start page download or url) is <md-select>

not set to its original location / state <md-option>

.

Any ideas?

+3

xyphenor 02 Aug '15 at 7:25

2 answers

Changing the field value

md-option

to a state object instead of a name (with ng-value

) solved the problem:

<md-option ng-repeat="state in ctrl.$state.get()" ng-value="state">{{ state.name }}</md-option>

+3

Numyx 02 Aug '15 at 7:37

xyphenor · Accepted Answer · 2015-08-05T21:10:35+0000

Thanks to epelc on Angular's github material:

<md-option ng-repeat="state in ctrl.$state.get()" ng-value="state.name">{{ state.name }}</md-option>

Numyx's answer was very close, except that it doesn't seem necessary to assign the JS object itself ng-value=""

as suggested.