The scope angular.js variable has been changed, but the view is not

Question

I am using angular.js with rails as my backend, and I am encountering a problem updating the value of a variable scope within a view. here i am trying to create a thing for shopping.

html code

<div class="modal hide fade" id="orderForm"> <div class="modal-header"> <h3> Please enter your location details <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> </h3> </div> <div class="modal-body scrollable"> <form accept-charset="UTF-8" class="simple_form form-horizontal" name="orderForm" novalidate="novalidate" ng-submit="validateAndSubmit(orderForm)" id="order_form"> <div class="control-group string optional order_full_name"> <label class="string optional control-label" for="order_full_name">Full name</label> <div class="controls"> <input class="string optional required " id="order_full_name" name="full_name" ng-model="full_name" placeholder="eg. Kapil Sharma" size="50" type="text" value=""> </div> </div> </div> <div class="modal-footer"> <a href="" data-dismiss="modal" aria-hidden="true" class="btn"> Close </a> <button type="submit" class="btn btn-success"> <i class="icon-ok"></i>&nbsp;Place order</button> <%# end %> </form> </div> 

This bootstrap is modal and is called with $('#orderForm').modal('show');

here is my javascript angular code.

 $scope.validateAndSubmit = function(form){ if(form.$valid){ var formData = $('#order_form').serializeObject();; $http.post('/create_order',{'order': formData}) .success(function(data,status){ $scope.currentOrder = data; $('#orderForm').modal('hide'); $scope.currentOrder = []; }).error(function(data,status){ //show error alert("error"); }); } else{ alert("invalid form"); } 

}

The problem is related to my scope $scope.currentOrder , it works fine in all other functions, but in validateAndSubmit the method does not update the view as needed. I checked the value of the scope variable with the javascript setInterval / p> method

  setInterval(function(){ alert($scope.currentOrder); } , 5000); 

the updated value is OK, but the view does not update the value, please help. Thanks in advance.

Answer 1

It looks like the callback is being called out of scope, you need to add $scope.$apply(); into your callback if you want it to update the view.