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

}