Angular.js - cascaded selects with AJAX loading

Question

Angular.js - cascaded selects with AJAX loading

I have two selects: one for country, other for regions. Country select is filled statically, but region select has to be filled dependent on current country through POST request.

I already made a server method which responds to country parameter with corresponding JSON, made a code for loading data into the select, but when I put this code into a watch it does not work properly:

.....................
]).factory('helperService', [
'$http', '$log', function($http, console) {
  var checkDiscount, getRegions;
  getRegions = function(countryCode) {
    return $http({
      method: 'POST',
      url: '/api/regions/',
      data: {
        country_code: countryCode
    }
  });
};

.....................
]).controller('orderController', [
.....................
$scope.$watch('billing_country', function(value) {
  helperService.getRegions($scope.country).success(function(result) {
    $scope.regions = result;
    return $scope.order.billing_state = $scope.regions[0];
  });
  return $scope.country = value;
});

select
angularjs

Answer 1

Your call to factory must return an object, currently it isn't returning anything at all.

Change it to the following:

.factory('helperService', ['$http', '$log', function($http, console) {

  var checkDiscount;

  var service = {
    getRegions: function(countryCode) {
      return $http({ method: 'POST',
                     url: '/api/regions/', 
                     data: { country_code: countryCode }
      });
    }
  };

  return service;
}])/****/

And then your call to helperService.getRegions will work.