Scope binding is not getting updated after scope variable was modified

Question

On submitting a $Modal (modalInstance) I am updating an array on the scope ($scope.expenses) the view has its binding to the object, datatable uses "expenses" as data. I can see that the $scope.expenses is getting updated on debug and a new item is being inserted but in the table and in a {{expenses.length}} bind I cant see the update. I have read many questions about this issue, The insert is being executed on angular side so if I understand apply\digest is not needed.

I tried:

calling $scope.$digest\$scope.$apply() after the push (Resulting an error that digest is already in progress)
wrap the push in a function in $scope.$apply(function). Same error, digest already in progress
Use $timeout so the push will get postponed for next digest cycle - view is not getting updated

None of the options above solved the issue.

View (I do see the length before the push so the bind is defined correctly in the view, thats why I don't paste the entire view):

<div class="row">
    <div class="ibox-content col-lg-10 col-lg-offset-1" ng-controller="LiveCtrl">
        {{expenses.length}}


        <div class="col-md-1" ng-controller="LiveCtrl">
            <button class="btn btn-link" ng-click="openAddExpenseModal()">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Expense
            </button>
        </div>
    </div>
</div>

Controller code where I push to expenses the new item:

  modalInstance.result.then(function (newExpense) {
  ExpenseService.addExpense(newExpense).then(function (id) {
            console.log(id);
            $scope.expenses.push(newExpense);
        }, function (rejectData) {
            console.log(rejectData);
        });
    }, function (msg) {
        console.log('Modal dismissed at: ' + new Date() + 'Message - ' + msg);
    });

We're going to need to see some more code to figure out what's wrong. Can you post the relevant code, where you use {{expenses.length}} ? — Omri Aharon
– Omri Aharon, Commented Feb 14, 2015 at 20:41
Updated the question, you can see the entire div which have this controller. I don't think the problem is there because I do see the binding it just not getting updated. — Or Guz
– Or Guz, Commented Feb 14, 2015 at 20:47
Can't see a reason why this shouldn't work. I created a fiddle (minus all the AJAX calls) that seems to be working - jsfiddle.net/HB7LU/10996 — Omri Aharon
– Omri Aharon, Commented Feb 14, 2015 at 20:52

Omri Aharon · Accepted Answer · 2015-02-14 20:54:22Z

1

The problem is that you are using the controller twice and in effect creating two scopes and therefore two arrays:

Once here: <div class="ibox-content col-lg-10 col-lg-offset-1" ng-controller="LiveCtrl">

And the second time here: <div class="col-md-1" ng-controller="LiveCtrl">

So the upper one shows you the length of the original expenses array, but you are actually adding the expense to the array of the second controller scope. The original one, in the parent scope remains unchanged.

What you need to do is remove the last declaration of your controller, creating:

<div class="row">
    <div class="ibox-content col-lg-10 col-lg-offset-1" ng-controller="LiveCtrl">
        {{expenses.length}}


        <div class="col-md-1">
            <button class="btn btn-link" ng-click="openAddExpenseModal()">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Expense
            </button>
        </div>
    </div>
</div>

answered Feb 14, 2015 at 20:54

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

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

2 Comments

Or Guz Over a year ago

How did I miss that ... Thanks! They used to be on different controllers and refactoring made me do this problem.

Omri Aharon Over a year ago

@OrGuz Happens to all of us :)

Collectives™ on Stack Overflow

Scope binding is not getting updated after scope variable was modified

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related