Q:

Angular Material Drop Down Labels not updating with Angular Translate

The labels for the drop downs in Angular Material are not updating. The labels for the text boxs are updating. I created a js fiddle to demonstrate. They do update if you click the drop down and click off from without selecting anything
https://jsfiddle.net/Anderson7301/suunyz3e/205/
var app = angular.module('ExpenseApp', [
  'ngMaterial',
  'ngMessages',
  'pascalprecht.translate'
])

app.config(function($mdThemingProvider) {
  // Configure a dark theme with primary foreground yellow
  $mdThemingProvider.theme('docs-dark', 'default')
    .primaryPalette('yellow')
    .dark();
});

app.config(["$translateProvider", function($translateProvider) {

  var en_translations = {
    "LoadCreditCardExpenses": "Load Credit Card Expenses",
    "employeeName": "Employee Name",
    "EmployeeVendorNumber": "Employee Vendor Number",
    "CostCenter": "Cost Center",
    "Department": "Department",
    "Manager": "Manager",
    "TravelMonth": "Travel Month",
    "TravelYear": "Travel Year",
    "CreditCardBalanceDue": "Credit Card Balance Due",
    "CashAdvance": "Cash Advance",
    "Submit": "Submit",
    "ExpenseReport": "Expense Report"

  }

  var sp_translations = {
    "LoadCreditCardExpenses": "Los gastos de carga de tarjetas de crédito",
    "employeeName": "nombre de empleado",
    "EmployeeVendorNumber": "número de proveedor empleado",
    "CostCenter": "centro de coste",
    "Department": "Departamento",
    "Manager": "Gerente",
    "TravelMonth": "Mes del viaje",
    "TravelYear": "Viaje año",
    "CreditCardBalanceDue": "Tarjeta de crédito Debido Equilibrio",
    "CashAdvance": "Adelanto en efectivo",
    "Submit": "Enviar",
    "ExpenseReport": "Informe de gastos"

  }

  $translateProvider.translations('en', en_translations);

  $translateProvider.translations('sp', sp_translations);

  $translateProvider.preferredLanguage('en');

}]);

app.controller('headerCtrl', function($timeout, $scope, $translate) {
  $scope.changeLanguage = function(lang) {
    $translate.use(lang);
  }

  $scope.months = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December"
  ];

  var d = new Date();
  var currentYear = (d.getFullYear());
  var lastYear = (currentYear - 1);

  $scope.years = [
    currentYear,
    lastYear
  ];
})

<body ng-app="ExpenseApp">
  <div layout="column" ng-cloak="" class="md-inline-form">
    <md-content md-theme="docs-dark" layout-gt-md="row" layout-padding="">
      <md-container>
        <h2>{{'ExpenseReport' | translate}}</h2>
      </md-container>
    </md-content>
    <md-content md-theme="docs-dark" layout-padding="">
      <div ng-controller="headerCtrl">
        <div layout-gt-md="row" layout-wrap>
          <md-input-container class="md-block" flex-gt-sm="20" flex-sm="100">
            <label>{{'EmployeeVendorNumber' | translate}}</label>
            <input ng-model="employees.SAPVendorNumber" readonly>
          </md-input-container>
          <md-input-container class="md-block" flex-gt-sm="20" flex-sm="100">
            <label>{{'CostCenter' | translate}}</label>
            <input ng-model="employees.CostCenter" readonly>
          </md-input-container>
          <md-input-container class="md-block" flex-gt-sm="20" flex-sm="100">
            <label>{{'Department' | translate}}</label>
            <input ng-model="employees.OrganizationalUnitName" readonly>
          </md-input-container>
          <md-input-container class="md-block" flex-gt-sm="20" flex-sm="100">
            <label>{{'Manager' | translate}}</label>
            <input ng-model="employees.ManagerDisplayName" readonly>
          </md-input-container>
        </div>
        <div layout-gt-sm="row" layout-wrap>
          <md-input-container class="md-block" flex-gt-sm="20" flex-sm="100">
            <label>{{'TravelMonth' | translate}}</label>
            <md-select ng-model="months">
              <md-option ng-repeat="month in months" value="{{month}}">
                {{month.name}}
              </md-option>
            </md-select>
          </md-input-container>
          <md-input-container class="md-block" flex-gt-sm="20" flex-sm="100">
            <label>{{'TravelYear' | translate}}</label>
            <md-select ng-model="user.years">
              <md-option ng-repeat="year in years" value="{{year}}">
                {{year}}
              </md-option>
            </md-select>
          </md-input-container>
          <md-input-container class="md-block" flex-gt-sm="20" flex-sm="100">
            <label>{{'CreditCardBalanceDue' | translate}}</label>
            <input ng-model="user.employeeCCBalanceDue" ng-pattern="/^[0-9]+([,.][0-9]+)?$/">
          </md-input-container>
          <md-input-container class="md-block" flex-gt-sm="20" flex-sm="100">
            <label>{{'CashAdvance' | translate}}</label>
            <input ng-model="user.employeeCashAdvance" readonly>
          </md-input-container>
          <md-container class="md-block" flex-gt-sm="20" flex-sm="100">
            <md-button ng-click="alert()">{{'Submit' | translate}}</md-button>
            <md-button>{{'LoadCreditCardExpenses' | translate}}</md-button>
          </md-container>
        </div>
        <div>
          <button ng-click="changeLanguage('en')">English</button>
          <button ng-click="changeLanguage('sp')">Spanish</button>
        </div>
      </div>
    </md-content>
  </div>
</body>

A:

Found a work around. Adding a placeholder to the  Allows it to update. I update the Travel month drop down so the Angular translate binds and left the Travel Year drop down the same for comparison
https://jsfiddle.net/Anderson7301/suunyz3e/205/
<md-input-container class="md-block" flex-gt-sm="20" flex-sm="100">
<label>{{'TravelMonth' | translate}}</label>
   <md-select ng-model="months" placeholder="{{'TravelMonth' | translate}}">
     <md-option ng-repeat="month in months" value="{{month}}">
       {{month.name}}
     </md-option>
   </md-select>
 </md-input-container>

