Angular Datepicker Material is Empty

Question

I am currently creating a web application with Angular, and I am using Angular Material for some user interface components. I currently have a problem that I cannot solve. When I use datepicker as described in https://material.angularjs.org/latest/demo/datepicker , a window opens, but it remains empty.

Here is the code snippet for datepicker.

<md-datepicker ng-model="vm.registrationData.birthDate" md-placeholder="{{'start_register_birth_date' | translate}}" required></md-datepicker> <div class="error-message" ng-messages="registerForm.birthDate.$error" ng-if="registerForm.birthDate.$touched && registerForm.birthDate.$invalid"> <div class="arrow-right"></div> <p ng-message="required">{{'start_register_error_birthDate_required' | translate}}</p> </div> 

Maybe something is wrong with my import?

 <!-- bower:js --> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/angular-animate/angular-animate.js"></script> <script src="bower_components/angular-messages/angular-messages.js"></script> <script src="bower_components/angular-sanitize/angular-sanitize.js"></script> <script src="bower_components/angular-translate/angular-translate.js"></script> <script src="bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script> <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script> <script src="bower_components/angular-cookies/angular-cookies.js"></script> <script src="bower_components/angular-aria/angular-aria.js"></script> <script src="bower_components/angular-material/angular-material.js"></script> <script src="bower_components/moment/moment.js"></script> <!-- endbower --> <script src="js/app.min.js"></script> <script src="js/config.min.js"></script> <!-- bower:css --> <link rel="stylesheet" href="bower_components/angular-material/angular-material.css" /> <!-- endbower --> <link rel="stylesheet" type="text/css" href="css/styles.css" /> 

Answer 1

Use an older version of Angular, say 1.5.9. Angular 1.6 disables controller prebinding.

For more details see Problem No. 10168 . You can add

 angular.module('myApp', []) .config(function($compileProvider) { $compileProvider.preAssignBindingsEnabled(true); }); 

if you insist on using Angular 1.6.