I have a problem creating 2 select dependents (select a state in the first select and that it deploys the municipalities only from that state) with Angularjs, the data is obtained through the $ http service in JSON format, the problem that I have is that when selecting the first select, in the second it only shows 4 blank spaces.
I hope you can help me
This is my html code:
<head>
<meta charset="utf-8">
<title>Document</title>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css"
rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/angular.min.js"></script>
<script src="controlador.js" type="text/javascript"></script>
</head>
<body ng-app="myApp">
<div ng-controller="estadosCtrl as ctrl">
<select id="estado" class="form-control" name="" ng-options="edo.id as
edo.name for edo in estado" ng-change="mySelect()" ng-model="estadoId">
<option value="">--Estados--</option>
</select>
<input type="text" ng-model="estadoId">
<select class="form-control" name="" id="" ng-options="muns.name for
muns in mun" ng-model="municipio">
<option value="">--Municipio--</option>
</select>
</div>
</body>
</html>
And this is my JS code:
var app = angular.module('myApp', []);
app.controller('estadosCtrl', function ($scope, $http) {
$http({
method: 'GET',
url: 'http://datamx.io/dataset/73b08ca8-e955-4ea5-a206-
ee618e26f081/resource/9c5e8302-221c-46f2-b9f7-
0a93cbe5365b/download/estados.json'
}).then(function mySuccess(response) {
$scope.estado = response.data;
$scope.estadoId = $scope.estado.id;
}, function myError(response) {
$scope.eestadoestado = (response.statusText);
});
$scope.mySelect = function () {
$scope.mun = "";
$scope.item = $scope.estadoId;
$http({
method: 'GET',
url: 'http://datamx.io/dataset/319a8368-416c-4fe6-b683-
39cf4d58b360/resource/829a7efd-3be9-4948-aa1b-
896d1ee12979/download/municipios.json'
}).then(function Success(response) {
var loc =[];
loc=response.data;
angular.forEach(loc, function (municipio) {
if (municipio.state_id == $scope.item) {
$scope.mun = municipio;
console.log($scope.mun);
}
});
}, function error(response) {
$scope.emun = (response.statusText);
});
}
});