I'm changing a model and I was expecting the view to update but it isn't:
Here is my view:
<div ng-controller="showCarCtrl">
<h1>Damaged Cars</h1>
<table border="1">
<tr>
<th>Plate Number</th>
<th>Brand</th>
<th>Color</th>
</tr>
<tr ng-repeat="car in cars" ng-show="car.damaged">
<td>{{car.plate_number}}</td>
<td>{{car.brand}}</td>
<td>{{car.color}}</td>
<td>
<button ng-click="setRepaired(car.cid)">Repaired</button>
</td>
</tr>
</table>
</div>
Here is the controller:
app.controller('showCarCtrl', function($scope, $rootScope,CarService){
$scope.setDamaged = function(cid){
console.log("setting the car as damaged "+cid)
$rootScope.loading = true;
CarService.setDamageCar(cid)
.then(function(data){
$rootScope.loading = false;
console.log("set damage 1")
for(var i=0; i<$scope.cars.length; i++) {
console.log("setting car as damage");
if ($scope.cars[i]==cid) {
$scope.cars[i].damaged = 1
$scope.$apply();
console.log("it enters here");
break;
}
console.log($scope.cars)
}
},
//deferred
function(data){
console.log('Car Service failed');
$rootScope.loading = false;
});
};
});
I've checked from the server, the reply from the server is properly comming and I'm successfully updating the model at $scope.cars[i].damaged = 1, the only issue is that I was expecting the view to change because as shown above, in the view, I've something as <tr ng-repeat="car in cars" ng-show="car.damaged">, but the view is not updating
