ui-bootstrap datetime-picker define show-meridian to false

Question

I'm using ui-bootstrap-datetime-picker with angularJS. And i'd like to know if it's possible to set show-meridian options of time-picker directly inside timepickerOptions ?

  ...  
  <input type="text" class="form-control" 
       datetime-picker="MM/dd/yyyy HH:mm"
       timepickerOptions="{'show-meridian': 'false'}"
       ng-model="ctrl.date.value" 
       is-open="ctrl.date.showFlag"/>
  <span class="input-group-btn"></span>
...

This is a plnkr which illustrate the problem.

Answer 1

Root cause of the problem is wrong naming style. To make your code work, you have to change camel-case to dash-delimited: timepicker-options instead of timepickerOptions (see my forked plunker):

<input type="text" class="form-control" 
   datetime-picker="MM/dd/yyyy HH:mm"
   timepicker-options="{'show-meridian': false}"
   ng-model="ctrl.date.value" 
   is-open="ctrl.date.showFlag"/>

The key point here is normalization process being done by AngularJS. Since HTML is case-insensitive, AngularJS cannot convert HTML attribute named timepickerOptions into scope variable timepickerOptions - because timepickerOptions in HTML is seen by AngularJS exactly like timepickeroptions; so, there is no chance for it to determine how to normalize this name. Thus, you should always use -, _ or : to delimiter different words in directive name when using HTML.