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
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
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 Omri Aharon · Accepted Answer · 2015-02-14T20:54:22

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>

Scope binding is not getting updated after scope variable was modified

1 Answers