TimePicker Выравнивания углового UI

У меня есть следующий код:TimePicker Выравнивания углового UI

<ul class="dropdown-menu custom-scroll dropdown-label custom-width" role="menu" aria-labelledby="btn-append-to-body" 
 
        ng-show="!display" 
 
        > 
 
        <li role="menuitem"> 
 
         <a href="" ng-click="$event.stopPropagation()">Start Time 
 
          <div class="input-group"> 
 
           <input type="text" id="timepicker1" class="form-control input-small" placeholder="" aria-describedby="sizing-addon2" 
 
             ng-model="abcd.startTime" ng-change="abcd.get('startTime')" 
 

 
            /> 
 
           <span class="input-group-addon" ng-click="abcd.startTimeClicked = true"><i class="glyphicon glyphicon-time"></i></span> 
 
          </div> 
 
          <timepicker ng-show="abcd.startTimeClicked" ng-model="abcd.startTime" ng-change="abcd.getETACount('startTime')" data-hour-step="1" data-minute-step="5" show-meridian="true" ></timepicker> 
 
         </a> 
 
        </li> 
 
        <li role="menuitem"> 
 
         <a href="" ng-click="$event.stopPropagation()">End Time 
 
          <div class="input-group"> 
 
           <input type="text" id="timepicker2" class="form-control input-small" placeholder="" aria-describedby="sizing-addon2" 
 
             ng-model="abcd.endTime" 
 
             ng-change="abcd.getETACount('endTime');" 
 
            /> 
 
           <span class="input-group-addon" ng-click="abcd.endTimeClicked = true"><i class="glyphicon glyphicon-time"></i></span> 
 
          </div> 
 
          <timepicker ng-show="abcd.endTimeClicked" ng-model="abcd.endTime" ng-change="abcd.getETACount('endTime')" data-hour-step="1" data-minute-step="5" show-meridian="true" ></timepicker> 
 
         </a> 
 
        </li> 
 
        <!--Clear div--> 
 
        <li role="menuitem" class="btn btn-default buttonli" 
 
         > 
 
         <a href="" ng-click="abcd.clearTimePicker($event); 
 
\t \t \t \t \t \t \t \t \t abcd.startTimeClicked = false; abcd.endTimeClicked = false"> 
 
          <p> 
 
           <span class="clear-all-btn">Clear</span> 
 
           <span class="drop-down-clear"> – ETA</span> 
 
          </p> 
 
         </a> 
 
        </li> 
 
       </ul>

Следующий скриншот показывает, что «:» (двоеточие) между часом и минутой не выровнен центром. Но, если я попытаюсь центрировать его выравнивание, все остальные ячейки таблицы будут затронуты. Как я могу это исправить?