<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" >
        <button type="button" class="close" ng-click="$hide()">&times;</button>
        <h4 class="modal-title">Change Time Settings</h4>
      </div>
      <div class="modal-body">
        <div class="">
          <label>Set the time zone for the system </label>
          <select ng-model="time.zone.data" ng-options="timeZone as timeZone.name | characters: 42 for timeZone in timeZones track by timeZone.id" ng-change="checkDST()" required></select>
          <div class="checkbox" ng-if="time.zone.data.s_time !== '0.0.0 00:00:00' || !time.zone.data.d_bias">
            <label>
              <input type="checkbox" ng-model="time.zone.dst"> Automatically adjust clock for Daylight Savings Time
            </label>
          </div>
        </div>

        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="time.format" ng-false-value="hh:mm:ss a" ng-true-value="HH:mm:ss"> Use 24-Hour Time 
            <span class="text-muted" current-time="time.format"></span>
          </label>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" ng-click="setTimeZone(); $hide()">OK</button>
        <button type="button" class="btn btn-danger" ng-click="$hide()">Cancel</button>
      </div>
    </div>
  </div>
</div>
