ng-options données lentes rendre ou sur les données de clic rendre dans la liste déroulante avec moins de données quantité

Question

à mon avis (modèle de barre Handler est utilisé) sur la fonction de chargement de la page obtenir appel et récupérer la valeur du serveur et charger la valeur pour les deux déroulant via ng-options, mais les données sont affichées dans les deux listes déroulantes après avoir cliqué dans les deux cases de sélection. signifie que sur la première case de sélection, les données de clic ne s'affichent pas alors que, après avoir cliqué sur les données de la deuxième case de sélection, elles apparaissent dans les deux listes déroulantes.

<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' 
      }]; 

Answer 1

Depuis $ .ajax est une fonction jQuery - et la course de rappel dans le succès est hors du champ de angulaire, vous devez dire angulaire rerender avec les nouvelles données référencées dans scope.month de $ et la portée de $ .endroit. Donc, comme ceci:

.then (function successCallback(response){ 
          console.log(response); 
$scope.$apply(function(){ 
$scope.place = response.toursiumData; 
          $scope.month= response.tripMonthData; 
}) 
        });