title: AngularJS: Setting up default input values when the page is initially loading
body: <p>I am developing an web app with AngularJS &amp; Bootstrap. In my application there is a bootstrap modal on  main dashboard. This modal is showing up on a toggle button. In the main dashboard there are some charts &amp; grids. The input fields for drawing these charts and grids are  coming from that modal.</p>
  
  <p>This is the main dashboard html.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="myApp"&gt;
  &lt;head&gt;
  
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;meta name="description" content=""&gt;
  &lt;meta name="author" content=""&gt;
  
  &lt;title&gt;&lt;/title&gt;
  
  &lt;!-- angularJS scripts --&gt;
  &lt;script
          src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"&gt;&lt;/script&gt;
  
  
  &lt;script src="../mvc/constants/constants.js"&gt;&lt;/script&gt;
  &lt;script src="../mvc/service/Service.js"&gt;&lt;/script&gt;
  &lt;script src="../mvc/controller/DashboardController.js"&gt;&lt;/script&gt;
  
  
  &lt;link rel="stylesheet"
        href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
  
  &lt;link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"&gt;
  
  &lt;!-- KENDO scripts for creating charts --&gt;
  
  &lt;script
          src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body ng-controller="DashboardController" ng-init="initModal()"&gt;
  
  &lt;div id="mainContainer"&gt;
  &lt;div class="demo-section k-content wide"&gt;
  
      &lt;div class="col-xs-8"&gt;
          &lt;h1 style="padding-left: 15px"&gt;
              HotelName&lt;i class="fa fa-pencil-square-o"
                          style="color: #6789DA; cursor: pointer; position: relative; top: -10px; font-size: 27px;"
                          data-toggle="modal" data-target="#hotelDetailModal"&gt;&lt;/i&gt;
          &lt;/h1&gt;
          &lt;h5 style="padding-left: 15px"&gt;{{packageString}}&lt;/h5&gt;
          &lt;h5 style="padding-left: 15px"&gt;{{requestRoomTypeName}}&lt;/h5&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-4"&gt;
  
  
          &lt;!-- ng-click="initialMethod()" --&gt;
          &lt;h4 style="text-align: right; margin-top: 14px; margin-right: 20px;"&gt;{{algoName}}
          &lt;/h4&gt;
          &lt;h6 style="padding-right: 20px; float: right"&gt;{{startDateString}}
              {{endDateString}}&lt;/h6&gt;
  
          &lt;!-- &lt;button type="submit" class="btn btn-default"
                  style="margin-right: 20px; margin-bottom: 20px; margin-top: 2px; float: right;"
                  data-toggle="modal" data-target="#changeSearch"
                  ng-click="initialMethod()"&gt;Edit criteria&lt;/button&gt; --&gt;
      &lt;/div&gt;
      &lt;!-- &lt;/div&gt; --&gt;
  &lt;/div&gt;
  
  &lt;div class="col-md-12"&gt;
      &lt;div id="grid" class="demo-section k-content wide"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="example" class="col-md-12"&gt;
      &lt;div class="demo-section k-content wide"&gt;
          &lt;div id="chart"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="chartContainer" class="col-md-7"&gt;
      &lt;div id="competitorPriceChart"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;!-- Modal --&gt;
  
  &lt;div class="modal fade" id="hotelDetailModal" role="dialog"&gt;
  &lt;div class="modal-dialog"&gt;
  
      &lt;!-- Modal content--&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
              &lt;h1&gt;Hotel Details&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-xs-6"&gt;
                      &lt;label&gt;Schema Type&lt;/label&gt; &lt;select
                          class="form-control" required="required"
                          ng-model="schemaType"
                          ng-change="changeSchemaType()"&gt;
                      &lt;option value="0"&gt;Hotel&lt;/option&gt;
                      &lt;option value="1"&gt;Destination&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div class=col-xs-6&gt;
                      &lt;label&gt;Sub Type&lt;/label&gt; &lt;select
                          class="form-control" id="subType"
                          ng-options="sub_type.cityCode for sub_type in subTypeList"
                          ng-model="subType" required="required"
                          ng-change="getHotelDataByDestination()"
  
                          value="{{sub_type.cityName}}"&gt;
                      &lt;option value="" disabled selected hidden=true&gt;Select
                          Option
                      &lt;/option&gt;
                  &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-xs-4"&gt;
                      &lt;label&gt;Hotel&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-12"&gt;
                      &lt;select class="form-control"
                              ng-options="hotel.hotelName for hotel in hotelList"
                              ng-model="hotel" required="required"
                              value="{{hotel}}"
                              ng-change="getRoomTypeByHotelName();getMealPlanByHotelName();"&gt;
                          &lt;option value="" disabled selected hidden=true&gt;Select
                              Option
                          &lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-xs-6"&gt;
                      &lt;label&gt;Room Type&lt;/label&gt; &lt;select
                          class="form-control"
                          ng-options="roomType.roomTypeName for roomType in roomTypeList"
                          ng-model="roomType" required="required"
                          value="{{roomType}}"&gt;
                      &lt;option value="" disabled selected hidden=true&gt;Select
                          Option
                      &lt;/option&gt;
                  &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-6"&gt;
                      &lt;label&gt;Meal Plan&lt;/label&gt; &lt;select
                          class="form-control"
                          ng-options="mealPlan.description for mealPlan in mealPlanList"
                          ng-model="mealPlan" required="required"
                          value="{{mealPlan}}"&gt;
                      &lt;option value="" disabled selected hidden=true&gt;Select
                          Option
                      &lt;/option&gt;
                  &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
  
                  &lt;div class="col-xs-3"&gt;
                      &lt;label&gt;Rooms&lt;/label&gt;
                      &lt;input id="rooms"
                             class="form-control" required="required"
                             ng-model="rooms"
                             type="number"/&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-3"&gt;
                      &lt;label&gt;Adults&lt;/label&gt;
                      &lt;input id="adults"
                             class="form-control" required="required"
                             ng-model="adults"
                             type="number"/&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-3"&gt;
                      &lt;label&gt;Children&lt;/label&gt;
                      &lt;input id="kids"
                             class="form-control" required="required"
                             ng-model="kids"
                             type="number"/&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;label&gt;Nights&lt;/label&gt;
                      &lt;input id="nights"
                             class="form-control" required="required"
                             ng-model="nights"
                             type="number"/&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
  
                  &lt;div class="col-xs-6"&gt;
                      &lt;label style="margin: 15px 0"&gt;Departure Date&lt;/label&gt; &lt;input
                          type="date" class="form-control"
  
                          ng-model="departureDate"&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
              &lt;!-- &lt;div class="row"&gt;
                  &lt;div class="col-xs-6"&gt;
                      &lt;button ng-click="detailCtrlViewModel.submit()"
                          class="btn btn-default" style="float: right;"&gt;Next&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt; --&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button ng-click="submit()"
                      class="btn btn-primary" style="float: right;"
                      data-dismiss="modal"&gt;SUBMIT
              &lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>When the app is running it should show the main page with all the charts &amp; grids. i.e. there should be default values for inputs when the page is loading.</p>
  
  <p>The modal-body field(drop down menus) are populating from the database.</p>
  
  <p>My <strong>DashboardController</strong> is as follows.</p>
  
  <pre><code>var myApp = angular.module('myApp', ['DataService']);
  myApp.controller('DashboardController', function ($scope, DataService) {
  
  $scope.rooms = 1;
  $scope.adults = 1;
  $scope.kids = 0;
  $scope.nights = 7;
  $scope.departureDate = new Date();
  $scope.schemaType = 1;
  $scope.caclulateOn = new Date().toISOString().slice(0, 10);
  
  
  $scope.initModal = function () {
      console.log('initModal');
      $scope.changeSchemaType();
  
      $scope.getHotelDataByDestination();
  };
  
  $scope.changeSchemaType = function () {
      $scope.subTypeList = [];
      if ($scope.schemaType == "0") {
          $scope.subTypeList.push({
              cityName : "5 star",
              cityCode : "city1",
          }, {
              cityName : "4 star or above",
              cityCode : "city2",
          });
          $scope.subType = $scope.subTypeList[0];
      } else {
          $scope.subTypeList.push({cityCode:"CITY1",cityName:"CITY1"},{cityCode:"city2",cityName:"city2"});
          $scope.subType = $scope.subTypeList[0];
          console.log($scope.subType);
  
      }
  
  }
  
  $scope.getHotelDataByDestination = function () {
      console.log($scope.subType);
      console.log($scope.subType.cityCode);
      var destinationCode = $scope.subType.cityCode;
  
      DataService.getHotelByDestinationService(destinationCode).success(
              function(data) {
  
                  $scope.hotelList = [];
                  for (var k = 0; k &lt; data.length; k++) {                     
                      $scope.hotelList.push({hotelId: data[k].hotelId, hotelName:data[k].hotelName });            
                  }
                  if(destinationCode == "CITY1"){
                      $scope.hotel = $scope.hotelList[17];
                      console.log($scope.hotel);
  
                  }else if(destinationCode == "CITY2"){
                      $scope.hotel = $scope.hotelList[2];
                      console.log($scope.hotel);
                  }else {
                      $scope.hotel = $scope.hotelList[0];
                  }
                  $scope.getRoomTypeByHotelName();
                  $scope.getMealPlanByHotelName();
  
              }).error(function(error) {
          console.log(error)
      });
  }
  
  $scope.getRoomTypeByHotelName = function () {
      console.log($scope.hotel);
      var hotelName = $scope.hotel.hotelName;
      DataService.getRoomTypeByHotelNameService(hotelName).success(
              function(data) {
                  $scope.roomTypeList = [];
                  for (var k = 0; k &lt; data.length; k++) {                     
                      $scope.roomTypeList.push({roomTypeName: data[k].roomTypeName });            
                  }
  
                  $scope.roomType = $scope.roomTypeList[0];
              }).error(function(error) {
          console.log(error)
      });
  
  }
  
  $scope.getMealPlanByHotelName = function () {
      var hotelName = $scope.hotel.hotelName;
      DataService.getMealPlanByHotelNameService(hotelName).success(
              function(data) {
                  console.log(data)
                  $scope.mealPlanList= [];
                  for (var k = 0; k &lt; data.length; k++) {                     
                      $scope.mealPlanList.push({code: data[k].code, description: data[k].description });          
                  }
                  $scope.mealPlan = $scope.mealPlanList[0];
              }).error(function(error) {
          console.log(error)
      });
  }
  
  $scope.submit = function () {
      console.log('submit');
      console.log($scope.rooms);
      console.log($scope.adults);
      console.log($scope.kids);
      console.log($scope.nights);
      console.log($scope.departureDate);
      console.log($scope.hotel);
      console.log($scope.roomType);
      console.log($scope.mealPlan);
  
      // call function to draw charts and grid
      $scope.displayTableView($scope.hotel.hotelId, $scope.roomType.roomTypeName, $scope.departureDate, $scope.nights,
              $scope.mealPlan.code);
      $scope.initCompetitorPriceChart($scope.hotel.hotelId, $scope.departureDate, $scope.nights, $scope.mealPlan.code);
  
  }
  
  
  
  });
  </code></pre>
  
  <p>When the page is loading it calls <strong>initModal</strong> function &amp; populate all the drop down field in the modal. But actually I am getting an empty page, them I toggle the modal I can select fields an clicks the submit button, then it draws charts. Initially it doesn't draw any graph or grid. The thing I really want is show main page with charts, those charts should be drawn for default input fields(when the modal is loading default values are the first element in the drop down). Again, once I select new values from the modal &amp; submit it should reload the main page with new charts based on newly selected values.</p>
  
  <p>Hope you clear what I am mentioning. Any suggestions would be highly appreciated.</p>
  
  <p><strong>UPDATED</strong></p>
  
  <p>This is the response right after </p>
  
  <pre><code>DataService.getHotelByDestinationService(destinationCode).success(
              function(data) {}
  
  [{"hotelId":26047,"hotelCode":null,"hotelName":"Anahita Residence and Villas","rating":null,"cityCode":null,"holidayId":27751},{"hotelId":26341,"hotelCode":null,"hotelName":"Belle Mare Plage (Hotel CONSTANCE)","rating":null,"cityCode":null,"holidayId":27911},{"hotelId":26364,"hotelCode":null,"hotelName":"Blumarine Attitude Hotel","rating":null,"cityCode":null,"holidayId":27874},{"hotelId":26362,"hotelCode":null,"hotelName":"Friday Attitude Hotel","rating":null,"cityCode":null,"holidayId":27873},{"hotelId":26965,"hotelCode":null,"hotelName":"Heritage Awali","rating":null,"cityCode":null,"holidayId":27934},{"hotelId":26963,"hotelCode":null,"hotelName":"Heritage le Telfair","rating":null,"cityCode":null,"holidayId":27931},{"hotelId":26306,"hotelCode":null,"hotelName":"Hotel Angsana Balaclava Mauritius","rating":null,"cityCode":null,"holidayId":27971},{"hotelId":26046,"hotelCode":null,"hotelName":"Hotel Sofitel So Mauritius","rating":null,"cityCode":null,"holidayId":27752},{"hotelId":26301,"hotelCode":null,"hotelName":"Long Beach Resort","rating":null,"cityCode":null,"holidayId":27753},{"hotelId":26763,"hotelCode":null,"hotelName":"LUX* Belle Mare","rating":null,"cityCode":null,"holidayId":27914},{"hotelId":26762,"hotelCode":null,"hotelName":"LUX* Grand Gaube","rating":null,"cityCode":null,"holidayId":27913},{"hotelId":26761,"hotelCode":null,"hotelName":"LUX* Le Morne","rating":null,"cityCode":null,"holidayId":27892},{"hotelId":26721,"hotelCode":null,"hotelName":"Maradiva Villas Resort &amp; Spa","rating":null,"cityCode":null,"holidayId":27891},{"hotelId":26330,"hotelCode":null,"hotelName":"Mont Choisy Beach Villas","rating":null,"cityCode":null,"holidayId":27932},{"hotelId":26331,"hotelCode":null,"hotelName":"Mystik Apart Hotel","rating":null,"cityCode":null,"holidayId":27933},{"hotelId":26048,"hotelCode":null,"hotelName":"One and Only Le Saint Geran","rating":null,"cityCode":null,"holidayId":27791},{"hotelId":26328,"hotelCode":null,"hotelName":"Preskil Beach Resort","rating":null,"cityCode":null,"holidayId":27771},{"hotelId":26361,"hotelCode":null,"hotelName":"Recif Attitude Hotel","rating":null,"cityCode":null,"holidayId":27872},{"hotelId":26329,"hotelCode":null,"hotelName":"Solana Beach Resort","rating":null,"cityCode":null,"holidayId":27792},{"hotelId":26743,"hotelCode":null,"hotelName":"Tamassa All-Inclusive Resort","rating":null,"cityCode":null,"holidayId":27893},{"hotelId":26541,"hotelCode":null,"hotelName":"The Ravenala Attitude Hotel","rating":null,"cityCode":null,"holidayId":27871},{"hotelId":26821,"hotelCode":null,"hotelName":"The Saint Regis Mauritius Resort","rating":null,"cityCode":null,"holidayId":27936},{"hotelId":26053,"hotelCode":null,"hotelName":"The Sands Suites Resort and Spa","rating":null,"cityCode":null,"holidayId":27772},{"hotelId":26822,"hotelCode":null,"hotelName":"The Westin Turtle Bay Resort &amp; Spa","rating":null,"cityCode":null,"holidayId":27935},{"hotelId":26764,"hotelCode":null,"hotelName":"Villas de LUX* Belle Mare","rating":null,"cityCode":null,"holidayId":27912},{"hotelId":26363,"hotelCode":null,"hotelName":"Zilwa Attitude Hotel","rating":null,"cityCode":null,"holidayId":27875}]
  </code></pre>
  
  <p>Thank You</p>