I'm attempting to retrieve data from a database using an external script in order to populate a select dropdown. However, my current approach results in numerous empty li elements being generated. Although the count seems correct, nothing is actually displayed on the screen. What could be causing this issue?
The Controller Code:
app.controller('agenciesController', function($scope, $http) {
var url = "/ajax/getAgencies.php";
$http.get(url).success( function(response) {
$scope.agencies = response;
$scope.agenciesArray = [];
angular.forEach(response, function(value, key){
$scope.agenciesArray.push(value);
})
console.log($scope.agenciesArray);
});
})
The HTML Structure:
<body ng-controller="Controller">
<div ng-controller="agenciesController">
<ul ng-repeat="agencyName in agencies">
<li>{{agenciesArray.agencyID}}</li>
</ul>
</div>
</body>
UPDATE: While the code is functional, it is currently displaying all responses instead of just one.
<div ng-controller="agenciesController">
<ul ng-repeat="agencyName in agenciesArray">
<li>{{agencyName}}</li>
</ul>
</div>