Directive to Create list of time based on Selected value of another dropdown

To show business hours I’ve opening and closing time select field for each day of the week.

PLUNKER

enter image description here

To generate the list of available hours on select drop-down I’ve made below $scope.uiAvailableTimes. It creates a list of time from 12:00 Morning to 12:00 midnight with 15 min interval.

$scope.uiAvailableTimes = [];
    $scope.uiAvailableTimes.push({
      'msValue': 0,
      'display': '12:00 Morning'
    });
    for (var msValue = 900000; msValue <= 85500000; msValue += 900000) { // 90.000ms = 15 min, 85.500.000ms = 11:45PM
      $scope.uiAvailableTimes.push({
        'msValue': msValue,
        'display': moment(msValue).utc().format("h:mm A")
      })
    }
    var dayMS = 86400000 - 1;
    $scope.uiAvailableTimes.push({
      'msValue': dayMS,
      'display': '12:00 Midnight'
    });

Problem 1:

There are chances for some owners to keep their business Open from 10:00 am to 2:00 am. Total 16 hours So I made a directive closingTimeSync

.directive('closingTimeSync', function() {
    return {
      template: `<md-select ng-disabled="time.uiStoreOpen === false" ng-model="openCloseSet[1]">
                        <md-option ng-repeat="uiTime in closingTimes" ng-value="uiTime.msValue">
                            {{::uiTime.display}}
                        </md-option>
                    </md-select>`,
      replace: true,
      transclude: true,
      link: function(scope) {
        scope.automaticallySelectClosingTime = function(msValue) {
          scope.closingTimes = scope.uiAvailableTimes;
          var dayMS = 86400000 - 1;
          var remainingTimings = [];
          var index = scope.closingTimes.map(function(obj) {
            return obj.msValue;
          }).indexOf(msValue);
          index = (index === scope.uiAvailableTimes.length - 1) ? 1 : index + 1;
          scope.closingTimes = scope.closingTimes.slice(index, scope.uiAvailableTimes.length);
          if (msValue !== dayMS) {
            remainingTimings = scope.uiAvailableTimes.slice(1, index - 1);
          }
          scope.closingTimes = scope.closingTimes.concat(remainingTimings);
          scope.openCloseSet[1] = scope.closingTimes[0];
          console.log(scope.openCloseSet[1]);
        };
      }
    };
  })

It takes the selected Opening hour and creates the Closing hour. then I submit the milliseconds to the server. But for the Case of

Sunday 10:00 am to 2:00 am

2:00 am (7200000) milliseconds count less than 10:00 am (36000000) which visually looks right but technically incorrect for sending this to the server. 2:00 am should millisecond of monday.

How can I solve this issue?

Problem 2:
As my directive rearrange the closing hours on change of opening hours how I can keep the closing hours rearranged when data was loaded on ng-model from the server.

struggling with the solutions. Any help will be highly appreciated.

Source: AngularJS