Material: Error: [Ara Error] [$compile:ctreq] Controller 'mdSelectMenu', required by directive 'mdOption', can't be found!

[mohsinmuzawar]

Error: [Ara Error] [$compile:ctreq] Controller 'mdSelectMenu', required by directive 'mdOption', can't be found!

this happens when i open md-dialog which has md-select which is populated by getting data through a http request and when i close and try to open md-dialog again it throws this error

[jeson114]

+1

[ThomasBurleson]

Please provide a CodePen or Plunkr that demonstrates this issue. Here are some starter demo templates that you can use/fork:

• CodePen template: http://codepen.io/pen?template=bEGJdd
• Plunkr template: http://plnkr.co/edit/yP0gB9iTacIQb48thud8?p=preview.

[mohsinmuzawar]

http://plnkr.co/edit/WGTCZXBzD9xx4WcpK5sj?p=preview

i created this plunker to demo my problem but it works fine over here. I dont knw wats going with it.

[KalpanaAr]

I am having the same issue too.

[R-Kurbatovvakoms]

The same problem, but occurs only sometimes.

The code:
md-input-container.language-select
md-select(md-no-ink, ng-model="language")
md-option(ng-value="key" ng-repeat="(key, lang) in languages") {{ lang.name }}

[hthetiot]

I found that I had this issue due a digest call on the scope that should not have append. In my case a state.go from UI router.

[R-Kurbatovvakoms]

@hthetiot and how did you fix that?

[soohoowoohoo]

@hthetiot I would like to know as well.

[cleever]

Same issue here.

Only happens in the second time that I open the dialog.

[devversion]

I can't reproduce the issue with @mohsinmuzawar's demo. Is there a demo, which shows the issue? Or am I missing something?

[mohsinmuzawar]

@DevVersion I Cant reproduce it on plunker or codepen and it only occurs when u open the dialog second time

[devversion]

@mohsinmuzawar I can't investigate if I don't have stuff to work on. So a screenshot / GIF or anything else would be good.

[soohoowoohoo]

I've found my fix! (hopefully this can help more of you out there).

Note: Using Angular-UI-Router

The way I fixed my issue was by including the templateUrl property in my view object. In the screenshot I've provided below, I was getting the issue in my 'role_assign' view but I wasn't getting an issue for my 'chat_board_view'. In my parent template I was declaring the role_assign view and including the html in the parent template and only defining the controller property in the view object. Once I moved the html from the parent view template into its own html file and included that in the view object's templateUrl the issue was resolved!

[claudiozanin]

I tried the example suggested by @soohoowoohoo but it didn't work for me.

I discovered an other solution described below.

First I placed the HTML of the fields that was throwing the exceptions of Angular inside a NG-REPEAT code, and in JavaScript code of Angular I did a push inside the list when the interface was ready to be built.

Below my HTML before the changes:
<div class="form-group" layout="row" flex> <md-input-container layout="column" flex> <label>Field Name</label> <md-select ng-model="service.selectedChart.serieField"> <md-option ng-repeat="column in columns" ng-value="column.columnName"> {{column.columnName}} </md-option> </md-select> </md-input-container> </div>

HTML after changes:
<div ng-repeat="control in controls"><div class="form-group" layout="row" flex> <md-input-container layout="column" flex> <label>Field Name</label> <md-select ng-model="service.selectedChart.serieField"> <md-option ng-repeat="column in columns" ng-value="column.columnName"> {{column.columnName}} </md-option> </md-select> </md-input-container> </div></div>

In JavaScript, before to fill the information in my models to present the options of my md-select I set my NG-REPEAT model with an empty Array, like this:
$scope.controls = [];

After all data got ready to be presented, I just append a new item in my array with this command.
$scope.controls = [{}];

I used this code in 3 places of my application and it worked fine. These fields was in forms placed inside $mdDialog.

[jeson114]

6048

https://github.com/angular/material/issues/6048#issuecomment-174176247
the error is reproduced here by @Undrium

[mohsinmuzawar]

@Undrium has already created this plunk which demonstrates this issue . @DevVersion @ThomasBurleson Have a look

http://plnkr.co/edit/8fgPvsNA5YDgKC9DDYKs

6048

[R-Kurbatovvakoms]

@claudiozanin thanks, your solution works for me despite it strange look.

[ram-you]

Occurs from the second time I open the dialog.

[ram-you]

I solved my problem by adding to $mdDialog this option:
autoWrap:false,

[Undrium]

@ram-you, I tried your solution but without any avail. Did you change anything else?

[ram-you]

@Undrium @mohsinmuzawar
I played with http://plnkr.co/edit/8fgPvsNA5YDgKC9DDYKs
added options:

 scope: $scope.$new(true),
 preserveScope: false,
 autoWrap: false

And FYI the template in this case must starts with the <md-dialog> tag.

Here the working one:
http://plnkr.co/edit/D6q5YaTLjwBgeI2aOrCF?p=preview

[Undrium]

@ram-you I adressed this in the parallel thread (#6048). This works, however you do not need to change autoWrap. Problem is that you do not get to keep the scope which makes it really weird (and far away from Angular conventions) to propagate data.

[anxiaoyi]

I meet the same problem, when I open the md-dialog second time, it throws this error.

[viktarkorshun]

+1

[ThomasBurleson]

@anxiaoyi, @viktarkorshun - please open a new issue with full details and codepen.