angulajrjs popup timepicker not inside input row

Question

I'm trying to write a popup timepicker on a modal. However, I want my button to place inside of the input but not after that input. How can I do that?

Thanks

Here is the plunker: http://embed.plnkr.co/L2Fs6eCrkP1NmnkNo4CG/

Answer 1

I've edited your plunker. Working example is here. Your modal body should looks like here:

  <div class="modal-body" id="modal-body">
      <label>Selected time is: <em>{{selectedDate | date:'mediumTime' }}</em></label>
      <div class="input-group">
        <input type="text" ng-model="selectedDate" class="form-control">
        <span class="input-group-btn" uib-dropdown auto-close="outsideClick">
          <button type="button" class="btn btn-default dropdown-toggle" uib-dropdown-toggle>
            <i class="glyphicon glyphicon-time"></i>
          </button>
          <ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
            <li>
              <span uib-timepicker ng-model="selectedDate" hour-step="1" show-seconds="true" minute-step="1" show-meridian="ismeridian"></span>
            </li>
          </ul>
        </span>
      </div>
  </div>