I'm having trouble iterating over the properties of a model that I am updating. Below is the code snippet from my controller:
app.controller('VariantsController', ['$http', function($http){
var ctrl = this;
this.cars = []; // Eventually get the cars ...
this.selected_car = null;
this.selectCar = function(car){
ctrl.selected_car = car;
}
When a user clicks on a "car" on the webpage, I update the selected_car property in the controller. The page then shows the name of the selected car correctly, but the ng-repeat directive does not iterate over the properties of selected_car.
Here's the relevant HTML (with variants as the alias for the controller):
<div ng-show="variants.selected_car">
<h6>{{variants.selected_car.name}}</h6> <!-- Updates correctly -->
<table class="table">
<tr ng-repeat="(key,val) in variants.selected_car.specs"> <!-- Issue! Does not iterate -->
<td>{{key}}</td>
<td>{{val}}</td>
</tr>
</table>
</div>
I've reviewed this post: AngularJS: ng-repeat list is not updated when a model element is spliced from the model array, but the accepted answer mentions issues with operations outside of AngularJS. However, in my case, I believe updating the model from within the controller should not be problematic. How would I go about using $apply in this scenario without explicitly involving $scope?
The selected_car.specs object contains numerous keys:
{
...
mileage: 13.53,
mileage_city: 23,
mileage_highway: 32,
power: 220,
...
}
For further reference, here is a Plunker provided by @Phil: http://plnkr.co/edit/ULSr2Tk5D7phTYW0t7Ys?p=preview