CODEWITHSUNDEEP
javascriptangularjsangularjs-scope
Or Guz
Or Guz

Reputation: 1018

Scope binding is not getting updated after scope variable was modified

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:

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);
    });

Upvotes: 0

Views: 131

Answers (1)

Omri Aharon
Omri Aharon

Reputation: 17064

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>

Upvotes: 1

Related Questions