<!DOCTYPE html>
<html ng-app="form">
  <head>
    <title>AngularJS Booking Form Demo</title>
    <link data-require="bootstrap-css@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="booking-form container">
      <section ng-controller="PanelController as panel">
        <ul class="nav nav-pills">
          <li ng-class="{ active: panel.isSelected(1)}">
            <a href="" ng-click="panel.selectTab(1)">Standard Form</a>
          </li>
          <li ng-class="{ active: panel.isSelected(2)}">
            <a href="" ng-click="panel.selectTab(2)">Custom Form</a>
          </li>
        </ul>
        <div class="panel standard_form" ng-show="panel.isSelected(1)">
          <div ng-hide="message">
            <h4>Standard Form</h4>
            <p>Complete and sumbit the form below to make a booking.</p>
            <p>Use the <b>Custom Form</b> for a more bespke booking.</p>
            <p><span class="required">* </span>Required fields</p>
          </div>
          <form name="mealForm" ng-controller="FormController as form" method="post" ng-submit="mealForm.$valid && handleFormSubmit(booking)" novalidate="" ng-hide="message">
            <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="firstName">First Name                                                                                                                        <span class="required"> *</span>
                  </label>
                  <input ng-model="booking.firstName" type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required="" />
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="lastName">Last Name                                                                                                                        <span class="required"> *</span>
                  </label>
                  <input ng-model="booking.lastName" type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required="" />
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="email">Email                                                                                                                        <span class="required"> *</span>
                  </label>
                  <input ng-model="booking.email" type="email" class="form-control" id="email" name="email" placeholder="Email" required="" />
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="telephone">Phone Number</label>
                  <input ng-model="booking.telephone" type="text" class="form-control" id="telephone" name="telephone" placeholder="Telephone" />
                </div>
              </div>
            </div>
            <!-- /.row -->
            <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="startDate">Start Date                                                                                                                        <span class="required"> *</span>
                  </label>
                  <p class="input-group">
                    <input type="text" class="form-control" datepicker-popup="{{format}}" is-open="opened1" min-date="minDate" max-date="" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-model="booking.startDate" name="startDate" id="startDate" ng-required="true" close-text="Close" ng-click="open($event)" />
                    <span class="input-group-btn">
                      <button type="button" class="btn btn-default" ng-click="open($event)">
                        <i class="glyphicon glyphicon-calendar"></i>
                      </button>
                    </span>
                  </p>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="endDate">End Date                                                                                                                        <span class="required"> *</span>
                  </label>
                  <p class="input-group">
                    <input type="text" ng-disabled="!booking.startDate" class="form-control" datepicker-popup="{{format}}" ng-model="booking.endDate" name="endDate" id="endDate" is-open="opened2" min-date="booking.startDate" max-date="" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" ng-click="open2($event)" />
                    <span class="input-group-btn">
                      <button type="button" ng-disabled="!booking.startDate" class="btn btn-default" ng-click="open2($event)">
                        <i class="glyphicon glyphicon-calendar"></i>
                      </button>
                    </span>
                  </p>
                </div>
              </div>
            </div>
            <!-- /.row -->
            <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="totalDays">Number of Days                                                                                                                         <span class="required"> *</span>
                    <em>(Min 3 days - discount of 10% Applies for 10 or more days)</em>
                  </label>
                  <select ng-model="booking.totalDays" class="form-control" name="totalDays" id="totalDays" required="">
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                    <option value="21">21</option>
                    <option value="22">22</option>
                    <option value="23">23</option>
                    <option value="24">24</option>
                    <option value="25">25</option>
                    <option value="26">26</option>
                    <option value="27">27</option>
                    <option value="28">28</option>
                    <option value="29">29</option>
                    <option value="30">30</option>
                  </select>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="groupSize">Group Size                                                                                                                         <span class="required"> *</span>
                    <em>(max 15)</em>
                  </label>
                  <select ng-model="booking.groupSize" class="form-control" name="groupSize" id="groupSize" required="">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                  </select>
                </div>
              </div>
            </div>
            <!-- /.row -->
            <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                  <label>Meal Type                                                                                                                         <span class="required"> *</span>
                    <em>(Select from below options)</em>
                  </label>
                  <ul>
                    <li ng-model="booking.mealType" ng-repeat="meal in form.meals" ng-click="form.selectMeal(meal);" ng-class="{active:meal.active}" class="mealType">{{meal.name}} - {{meal.description}}                                                                                                                                     <span>{{meal.price | currency}}</span>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="message">Message Details                                                                                                                         <em>Vacation address, specific dietery requirements, any other information</em>
                  </label>
                  <textarea placeholder="Vacation address, specific dietery requirements, any other information" ng-model="booking.message" name="message" id="message" cols="30" rows="5"></textarea>
                </div>
              </div>
            </div>
            <!-- /.row -->
            <div class="form-group">
              <label class="total" for="total">
							Total:                                                                                                 <span>{{booking.total | currency}}</span>
                <em ng-show="booking.discount">(10% Discount of                                                                                                             <span>{{booking.percentage | currency}} applied)</span>
                </em>
              </label>
            </div>
            <div class="form-group">
              <button type="submit" ng-disabled="mealForm.$invalid" value="Submit" class="btn btn-default">Submit</button>
              <input type="hidden" ng-model="booking.mealType" name="mealType" />
              <input type="hidden" ng-model="booking.total" name="total" />
              <input type="hidden" ng-model="booking.percentage" name="discount" />
            </div>
          </form>
        </div>
        <!-- /.panel -->
        <!-- Success message -->
        <div ng-show="message">
          <p>Form submitted succesfully! Thank you for contacting us. We aim to respond to all enquiries within 48hrs. </p>
        </div>
        <div class="panel custom_form" ng-show="panel.isSelected(2)">
          <h4>Custom Form</h4>
          <p>If you require a more bespoke booking please contact us.</p>
        </div>
      </section>
    </div>
    <script data-require="angular.js@1.3.13" data-semver="1.3.13" src="https://code.angularjs.org/1.3.13/angular.js"></script>
    <script data-require="ui-bootstrap@0.12.1" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
    <script src="script.js"></script>
  </body>

</html>
// Code goes here
(function() {

  var app = angular.module('form', ['ui.bootstrap']);

  app.controller('FormController', ['$http', '$scope', '$window',
    function($http, $scope, $window) {

      var type = this;
      type.meals = [];
      // Call the form data
      $http.get('form-meals.json').success(function(data) {
        type.meals = data;
      });

      $scope.booking = {};
      // watch for a change in the totalDays or groupSize
      $scope.$watchGroup(['booking.totalDays', 'booking.groupSize'], function(value) {
        total();
      });

      // send data to action.php on submit
      $scope.handleFormSubmit = function(booking) {

        /*----
        Un comment the following lines to enable action.php script
        ----*/
        // $http.post('action.php', booking).success(function (data, status) {
        //     if (data.success) {
        //         $window.alert("Thank you! Your message has been sent.");
        //         $scope.booking = {};

        //         // display success message
        //         $scope.$parent.message = true;
        //     }			
        // }).error(function (data, status) {
        //     $window.alert("Sorry, there was a problem!");
        // });

        /*----
			Remove the following 2 lines of code if you are enabling action.php script
			----*/
        $scope.booking = {};
        $scope.$parent.message = true;


      };


      this.selectMeal = function(setMeal) {
        if (!setMeal.active) {
          angular.forEach(this.meals, function(s) {
            s.active = false;
          });
          setMeal.active = true;
        }

        total();
      };

      var me = this;

      var total = function() {

        var total = 0;
        var percentage = 0;
        var mealType;
        var discount = false;

        total = $scope.booking.totalDays * $scope.booking.groupSize;

        angular.forEach(me.meals, function(s) {
          if (s.active) {
            total *= s.price;
            mealType = s.name + ' - ' + s.description;
          }

        });
        if ($scope.booking.totalDays >= 10) {
          percentage = (total / 100) * 10;
          total -= percentage;
          discount = true;
        }

        $scope.booking.total = total;
        $scope.booking.percentage = percentage;
        $scope.booking.mealType = mealType;
        $scope.booking.discount = discount;
      };

      // Datepicker

      $scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();

        $scope.opened1 = true;
        $scope.opened2 = false;
      };

      $scope.open2 = function($event) {
        $event.preventDefault();
        $event.stopPropagation();

        $scope.opened1 = false;
        $scope.opened2 = true;
      };

      $scope.clear = function() {
        $scope.dt = null;
        $scope.dt2 = null;
      };

      $scope.toggleMin = function() {
        $scope.minDate = $scope.minDate ? null : new Date();
      };
      $scope.toggleMin();

      $scope.dateOptions = {
        formatYear: 'yy',
        startingDay: 1
      };

      $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
      $scope.format = $scope.formats[0];

    }
  ]);

  app.controller('PanelController', function() {
    this.tab = 1;

    this.selectTab = function(setTab) {
      this.tab = setTab;
      if (setTab === 2) {
        $scope.message = false;
      }
    };

    this.isSelected = function(checkTab) {
      return this.tab == checkTab;

    };
  });
})();
/* Styles go here */

.booking-form {
  margin-top: 20px;
}
.radio label {
  text-transform: capitalize;
}
.preview {
  list-style-type: none;
  font-weight: 700;
  padding-left: 0;
}
.preview li {
  margin-bottom: 5px;
}
form ul {
  padding-left: 0;
  list-style-type: none;
}
form .mealType {
  padding: 10px 15px;
  background-color: #ffffff;
  cursor: pointer;
  color: #337ab7;
  border-radius: 4px;
  text-transform: capitalize;
  margin-bottom: 0;
  width: 100%;
  border: none;
  text-align: left;
}
form .mealType span {
  float: right;
}
form .mealType.active {
  background-color: #337ab7;
  color: #ffffff;
}
form .mealType.active:hover {
  background-color: #337ab7;
  color: #ffffff;
}
form .mealType.active,
form .mealType:hover {
  outline: none;
}
.form-control:focus {
  border-color: #ccc;
  webkit-box-shadow: none;
  box-shadow: none;
}
form .mealType:hover {
  background-color: #eee;
  color: #23527c;
}
form label em {
  display: block;
  font-size: 12px;
}
form textarea {
  width: 100%;
  min-height: 115px;
}
form .ng-invalid.ng-dirty {
  border-color: #FA787E;
}
form .ng-valid.ng-dirty {
  border-color: #78FA89;
}
form .form-valid {
  color: #FA787E;
}
form .form-valid.active {
  color: #78FA89;
}
.required {
  color: red;
}
.btn-group .btn.btn-sm.btn-info.ng-binding {
  display: none;
}
.btn-group .btn.btn-sm.btn-danger.ng-binding {
  border-radius: 3px;
}
AngularJS Booking Form: A booking form powered by Angular linked via a php file to send booking form via email.
[
	{
		"name": "Breakfast",
		"price": "20",
		"description": "Three course breakfast",
		"active": true
	},
	{
		"name": "Dinner",
		"price": "20",
		"description": "Three course dinner",
		"active": false
	},
	{
		"name": "Both",
		"price": "40",
		"description": "Breakfast and Dinner",
		"active": false
	}

]