Angularjs: Refresh view after model changes

Question

I'm trying to update the view after adding a new record and updating the model. On the income account details page you can add a new record via a form that pops up in a modal. After submitting the form the modal closes adds the new record to the db and updates the model.

income_account_details.html

<ion-view view-title="Account Details: {{incomeAccount.accountName}}">
    <ion-nav-buttons side="right">
        <button class="button button-icon" ng-click="newIncome()">
            <i class="ion-android-add icon"></i>
        </button>
    </ion-nav-buttons>
    <ion-content>
        <ion-list>
            <div class="list card" ng-repeat="record in incomeAccountRecords">
                <div class="item item-divider">
                    <h2>{{record.date}}</h2>
                </div>
                <div class="item item-body">
                    <p>${{record.amount}} note: {{record.note}}</p>
                </div>
            </div>
        </ion-list>
    </ion-content>
</ion-view>

controller.js

...
.controller('IncomeAccountsDetailsCtrl', function($scope, $stateParams, dbService, ModalService) {
    $scope.incomeAccountRecords = {};
    $scope.incomeAccount = {};

    $scope.load = function(){            
        dbService.getRecordsByAccountDb($stateParams.account_id).then(function(incomeAccountRecords){
            $scope.incomeAccountRecords = incomeAccountRecords;
        });
        $scope.incomeAccount = dbService.getIncomeAccountDb($stateParams.account_id);
    }

    $scope.load();

    $scope.newIncome = function(){
      ModalService
        .init('templates/income.html', $scope)
        .then(function(modal){
            modal.show();
        });
    }

    $scope.addIncome = function(form){
        dbService.addIncomeDb($scope.incomeAccount.id, form.amount.$viewValue, form.date.$viewValue, form.note.$viewValue);
        $scope.load();
        $scope.closeModal();
    }
})
...

The issue that I am running into is after submitting the form the model is getting updated(verified through console.log()) but the view is not. If I refresh the page it shows the correct information.

I disabled cache in the state. I have tried adding $scope.$apply in the load() function but that through an error "$digest already in progress"

Is there a way to refresh the view after the model is updated?

Edit: I was able to reload the state by injecting $state into the controller and calling $state.reload() to refresh the page.

.controller('IncomeAccountsDetailsCtrl', function($scope, $stateParams, dbService, ModalService, $state) {

$scope.addIncome = function(form){
    dbService.addIncomeDb($scope.incomeAccount.id, form.amount.$viewValue, form.date.$viewValue, form.note.$viewValue);
    $scope.load();
    $scope.closeModal();
    $state.reload();
}

Answer 1

Please find this answer it may be useful for you
As
After you finished your changes in your modal box

$state.transitionTo("Your current state name", "You can pass any parameters", "Forcefully reloading the view ");

see the below example
1st method

$state.transitionTo($state.current, {seqId: ''}, { reload: true});

or 2nd method

$state.reload()

Answer 2

You can use $state.transitionTo or $state.go('', {reload: true}) and $state.reload.

but if you want to make each controller reload after view change

myApp.config(function($ionicConfigProvider) {$ionicConfigProvider.views.maxCache(0);}

Answer 3

The "load" function is getting called within "addIncome" which is updating the "$scope.incomeAccountRecords". This should automatically update the view. You should check what the "$scope.closeModal()" call is doing. Probably that is causing an issue.

Answer 4

Push newly added record to $scope.incomeAccountRecords.

Answer 5

try this

  router.setUpRoutes();