Business Hours form example

A form to select and add business hours

HTML

<div ng-controller="mainCtrl">
    <div ng-repeat="time in workingHours">{{time.day}}:
        <select ng-init="start_time = start_time" required="true" name="openTime" ng-options="hour as (hour | date: 'shortTime') for hour in hours track by $index" ng-model="start_time" ng-change="update(start_time, $index, 1)"></select>-
        <select ng-init="start_time = '9:00'" required="true" name="closeTime" ng-options="hour as (hour | date: 'shortTime') for hour in hours track by $index" ng-model="end_time" ng-change="update(end_time, $index, 2)"></select>
        <button ng-click="didClickAddDay(time.day, $index)">Add</button>
        <button ng-click="didClickRemoveDay(time.day, $index)">Remove</button>
    </div>
</div>

JavaScript

app.controller('mainCtrl', function AppCtrl($scope) {

    $scope.weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    $scope.workingHours = []; // to be sent to server
    $scope.hours = []; // list of intervals, eg: 12:00 am, 12:30 am, 1:00 am

    $scope.start_time = new Date(), var app = angular.module('hours', []);$scope.start_time.setHours(9), $scope.start_time.setMinutes(0), $scope.start_time.setSeconds(0);
    $scope.end_time = new Date(), $scope.end_time.setHours(9), $scope.end_time.setMinutes(0), $scope.end_time.setSeconds(0);


    for (var i = 0; i < 24; i++) {
        // push interval of times at every half hour
        var temp_date = new Date();
        temp_date.setHours(i);
        temp_date.setMinutes(0);
        temp_date.setSeconds(0);
        $scope.hours.push(temp_date);

        var temp_date2 = new Date();
        temp_date2.setHours(i);
        temp_date2.setMinutes(30);
        temp_date2.setSeconds(0);
        $scope.hours.push(temp_date2);
    }

    for (var j = 0; j < $scope.weekdays.length; j++) {
        // Pre-populating object literal with working hours 9 am to 5 pm everyday that will be sent to server
        var date = new Date();
        var begin_time = date.setHours(9);
        begin_time = date.setMinutes(0);
        begin_time = date.setSeconds(0);
        var date2 = new Date();
        date2.setMinutes(0);
        date2.setSeconds(0);
        var end_time = date2.setHours(5);
        $scope.workingHours.push({
            day: $scope.weekdays[j],
            begin_time: begin_time,
            end_time: end_time
        })
    }

    $scope.didClickAddDay = function (day, index) {
        var date = new Date();
        var begin_time = date.setHours(9);
        begin_time = date.setMinutes(0);
        begin_time = date.setSeconds(0);
        var date2 = new Date();
        date2.setSeconds(0);
        date2.setMinutes(0);
        var end_time = date2.setHours(5);
        var...