I've been attempting to display a nested array using AngularJS, but I'm encountering some difficulties.
Controller:
$scope.selected_category = [];
$scope.categories = [];
$scope.getCategories = function() {
ItemService.getCategories().success(function(categories) {
$scope.categories = categories;
});
}
$scope.getCategories();
The form setting $scope.selected_category
<select class="form-control" ng-model="selected_category">
<option ng-repeat="category in categories" value="{{ category }}">{{ category.name }}</option>
</select>
When I print out {{ selected_category }}, it displays the expected array with a subcategory array inside:
{
"id": "1",
"name": "clothing",
"subcategories": [
{
"id": "1",
"name": "jackets",
"item_category_id": "1"
},
{
"id": "2",
"name": "jeans",
"item_category_id": "1"
},
{
"id": "3",
"name": "sweaters",
"item_category_id": "1"
}
]
}
However, when I attempt to access selected_category.subcategories, nothing is returned. What could be causing this issue?
Here's a plunker demonstrating the problem: http://plnkr.co/edit/AtqpXogmItdSupEZGt7R?p=preview