0

in my view(Handler bar template is used) on page load function get call and fetch the value from server and load the value for both dropdown via ng-options, but data comes in both dropdown after click in both select boxes. means on first select box click data doesn't render while after click on second select box data comes in both dropdown .

 <form>
                      <div class="form-group">
                         <div class="col-md-4">
                            <select class="form-control" ng-model="CDOplace" ng-options="place.Id as place.Name for place in place">
                              <option value="">To:   Himachal</option>
                            </select>
                          </div>
                          <div class="col-md-4">
                            <select class="form-control" ng-model="CDOdate" ng-options="mon.Id as mon.Name for mon in month">
                                <option value="">Month of Travel</option>

                            </select>
                          </div>
                          <div class="col-md-4">
                              <button type="submit" class="btn btn-info btn-block" ng-click="btnExplore()">Explore <span class="fa fa-caret-right"></span></button>
                          </div>
                        </div>
                    </form>

controller-file:
    var app = angular.module('myApp',[]);
    app.controller("myCtrl",['$http','$scope',function($http,$scope){
        onLoad();
        function onLoad(){
            $.ajax({
              url: "/tourData",
              method: "GET"
            }).then (function successCallback(response){
                          console.log(response);
                          $scope.place = response.toursiumData;
                          $scope.month= response.tripMonthData;
                    });
          }
    }]);
response:--
var toursiumData = [{
                Id: 1,
                Name: 'Himachal'
            }, {
                Id: 2,
                Name: 'Goa'
            }, {
                Id: 3,
                Name: 'Sikkim'
            },{
                Id: 4,
                Name: 'Kerla'
            }, {
                Id: 5,
                Name: 'Thailand'
            }];

  var tripMonthData = [{
                Id: 1,
                Name: 'April'
            }, {
                Id: 2,
                Name: 'May'
            }, {
                Id: 3,
                Name: 'June'
            },{
                Id: 4,
                Name: 'July'
            }, {
                Id: 5,
                Name: 'August'
            }];
Cœur
  • 37,241
  • 25
  • 195
  • 267
Sachin Saini
  • 1
  • 1

1 Answers1

1

Since $.ajax is a jQuery function - and the callback run in the success is outside the scope of Angular, you have to tell Angular to rerender with the newly referenced data in $scope.month and $scope.place. So like this:

.then (function successCallback(response){
                          console.log(response);
$scope.$apply(function(){
$scope.place = response.toursiumData;
                          $scope.month= response.tripMonthData;
})
                    });
itamar
  • 3,837
  • 5
  • 35
  • 60