JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cfagentSchedule" ng-app="cfagentSchedule" ng-controller="cfagentScheduleController">
                <div>
                  Run agent every: <select data-ng-model="agentSchedule.interval" data-ng-options="item.m as item.name for item in intervals" ng-change="onChangeInterval()"></select>
                </div>
                <div>
                  First run time: 
                  Hour: <select data-ng-model="agentSchedule.startHour" data-ng-options="item for item in hours()" ng-change="onChange()"></select>
                  Minutes: <select data-ng-model="agentSchedule.startMinute" data-ng-options="item for item in minutes()" ng-change="onChange()"></select>
                </div>
                <div>
                 Maximum delay after scheduled run time (random interval, in minutes)
                 <select data-ng-model="agentSchedule.splayTime" data-ng-options="item for item in splays()" ng-change="onChange()"></select>
                </div>
                
                <p>Test: {{agentSchedule}}</p>
              </div>

JavaScript

var cfagentScheduleModule = angular.module("cfagentSchedule", [])
        cfagentScheduleModule.controller("cfagentScheduleController", function($scope) {
          
          $scope.agentSchedule = {"interval":5,"startHour":0,"startMinute":0,"splayTime":0}

          
          $scope.intervals = [
                                 {"m":5, "name": "5 minutes"}
                               , {"m":10, "name": "10 minutes"}
                               , {"m":15, "name": "15 minutes"}
                               , {"m":20, "name": "20 minutes"}
                               , {"m":30, "name": "30 minutes"}
                               , {"m":60, "name": "1 hour"}
                               , {"m":120, "name": "2 hours"}
                               , {"m":240, "name": "4 hours"}
                               , {"m":360, "name": "6 hours"}
                             ];
          
          $scope.hours = function() {
            var h = []
            var i = 0
            while(i < $scope.agentSchedule.interval / 60) {
              h.push(i);
              i = i+1;
            }
            return h;
          }
            
          $scope.minutes = function() {
            var m = [];
            var i = 0;
            while(i < $scope.agentSchedule.interval && i < 60) {
              m.push(i);
              i = i+1;
            }
            return m;
          }
          
          $scope.splays = function() {
            var s = [];
            var i = 0;
            while(i < $scope.agentSchedule.interval) {
              s.push(i);
              i = i+1;
            }
            return s;
          }
         
        });
        angular.bootstrap(document.getElementById("cfagentSchedule"),['cfagentSchedule']);