How does AngularFire $save function work? - angularjs

Question

I want to update a group of fields based on the contract number input in, user can choose which field they want to change, and can set the value. my code does not change the record, I don't know why.I guess the reason might be the prop is not defined. The app is build on using the api of AngularFire, my code is as follows:
<div class="container-fluid">
<div class="row">
<h3>Contract renewal & Group update other fields</h3>
<form class="form-horizontal" ng-submit="groupUpdate()" name="contractupdateForm">
<div class="form-group">
<label for="washroom" class="col-sm-2 control-label"> Contract Number</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter contract number so related fileds could be group updated" ng-model="contractupdate" ng-required="true">
</div>
</div>
</div>
<div class="form-group">
<label for="washroom" class="col-sm-2 control-label"> Fields Category</label>
<div class="col-sm-8">
<div class="input-group">
<select class="form-control" id="productfield" name = "productfield" ng-model="fieldupdate" ng-options="f.value as f.label for f in fields">
<option value="">No filed selected</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="washroom" class="col-sm-2 control-label"> Updated value</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter value supposed to be changed" ng-model="valueupdate" ng-required="true">
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2">
<button type="submit" class="btn btn-default" >
Change group value
</button>
</div>
</div>
</form>
<hr>
</div>
</div>
The controller part is as follows:
$scope.groupUpdate = function(){
console.log($scope.contractupdate);
console.log($scope.fieldupdate);
console.log($scope.valueupdate);
for(var i = 0; i< productsInfo.length;i++){
if(productsInfo[i].productcontract == $scope.contractupdate){
var prop = $scope.fieldupdate;
productsInfo[i].prop = $scope.valueupdate;
productsInfo.$save(i).then(function(ref) {
console.log("group update success");
}, function(error) {
console.log("Error:", error);
});
}
/*if(i.productcontract == $scope.contractupdate){
var field = $scope.fieldupdate;
console.log(productsInfo[i].field);
productsList[i].field == $scope.valueupdate;
productsList.$save().then(function(productRef){
console.log("group updated success");
ref.key === obj.$id; // true
}, function(error) {
console.log("Error:", error);
});
}*/
};
};

Answer 1

The second $save operation needs to be chained from the promise returned from the first $save operation:
var promise = productsInfo.$save().then(function(ref) {
console.log("group update success");
//return to chain ref
return ref;
}, function(error) {
console.log("Error:", error);
//throw to chain error
throw error;
});
var p2 = promise.then(function(ref) {
//do more here
//return to chain promise
return productsInfo.$save();
}).catch(function(error) {
console.log("Error:", error);
//throw to chain error
throw error;
});
var p3 = p2.then(function(secondRef) {
//do even more
When code is put in a function given to a .then method, the $q service waits for the promise to resolves before invoking that function. The .then method returns a derived promise which can be used for further chaining.
For more information, see AngularJS $q Service API Reference -- chaining promises