angular.js scope variable is updating but view is not

Question

i am using angular.js with rails as my backend and i am encountering problem while updating the value of a scope variable inside the view. here i am trying to create a shopping cart kind of a thing.

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 is a bootstrap 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 with my scope variable $scope.currentOrder, in all other functions its working fine but in validateAndSubmit method its not updating the view as required i have checked the value of the scope variable by using the javascript setInterval method

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

the updated value is fine in alert but the view is not updating the value, please help. Thanks in advance.

Do not augment angular with jQuery it will cause pain. If you want to use bootstrap modal look at angular-ui.github.io/bootstrap also you are setting currentOrder = data and then two lines down currentOrder = [] Is that correct? Provide more code or a jsfiddle.net for help — Mark Coleman
– Mark Coleman, Commented May 30, 2013 at 13:26
Why are you extracting the data from the form using jQuery? The form fields should be mapped to variables defined in your current $scope. Also, Angular will take care of the serialization when you post. Mark is correct - do not use jQuery. If you feel as though you need jQuery, stop and think 'cause you're probably doing something wrong. Also note that you are accessing the DOM from your controller. This is bad. And you should never do it. Ever. — Jarad DeLorenzo
– Jarad DeLorenzo, Commented May 30, 2013 at 13:35
i am using jquery in other $scope methods and all other scope variables are doing good its just here that i am encountering problem, why am i not able to use it here?? and mark i have tried removing 'currentOrder = data;' from the code, the error still remains. — Abhimanyu
– Abhimanyu, Commented May 30, 2013 at 13:41
So now you are trying to update the view with an empty array $scope.currentOrder = [] ? — rGil
– rGil, Commented May 30, 2013 at 15:22

TheSharpieOne · Accepted Answer · 2013-08-21 02:10:02Z

3

It appears the callback is called outside of the scope, you will need to add $scope.$apply(); in your callback for when you want it to update the the view.

answered Aug 21, 2013 at 2:10

TheSharpieOne

25.7k9 gold badges71 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular.js scope variable is updating but view is not

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related