I'm trying to update the view after adding a new record and updating the model. On the ine 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.

ine_account_details.html

<ion-view view-title="Account Details: {{ineAccount.accountName}}">
    <ion-nav-buttons side="right">
        <button class="button button-icon" ng-click="newIne()">
            <i class="ion-android-add icon"></i>
        </button>
    </ion-nav-buttons>
    <ion-content>
        <ion-list>
            <div class="list card" ng-repeat="record in ineAccountRecords">
                <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('IneAccountsDetailsCtrl', function($scope, $stateParams, dbService, ModalService) {
    $scope.ineAccountRecords = {};
    $scope.ineAccount = {};

    $scope.load = function(){            
        dbService.getRecordsByAccountDb($stateParams.account_id).then(function(ineAccountRecords){
            $scope.ineAccountRecords = ineAccountRecords;
        });
        $scope.ineAccount = dbService.getIneAccountDb($stateParams.account_id);
    }

    $scope.load();

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

    $scope.addIne = function(form){
        dbService.addIneDb($scope.ineAccount.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('IneAccountsDetailsCtrl', function($scope, $stateParams, dbService, ModalService, $state) {

$scope.addIne = function(form){
    dbService.addIneDb($scope.ineAccount.id, form.amount.$viewValue, form.date.$viewValue, form.note.$viewValue);
    $scope.load();
    $scope.closeModal();
    $state.reload();
}

I'm trying to update the view after adding a new record and updating the model. On the ine 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.

ine_account_details.html

<ion-view view-title="Account Details: {{ineAccount.accountName}}">
    <ion-nav-buttons side="right">
        <button class="button button-icon" ng-click="newIne()">
            <i class="ion-android-add icon"></i>
        </button>
    </ion-nav-buttons>
    <ion-content>
        <ion-list>
            <div class="list card" ng-repeat="record in ineAccountRecords">
                <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('IneAccountsDetailsCtrl', function($scope, $stateParams, dbService, ModalService) {
    $scope.ineAccountRecords = {};
    $scope.ineAccount = {};

    $scope.load = function(){            
        dbService.getRecordsByAccountDb($stateParams.account_id).then(function(ineAccountRecords){
            $scope.ineAccountRecords = ineAccountRecords;
        });
        $scope.ineAccount = dbService.getIneAccountDb($stateParams.account_id);
    }

    $scope.load();

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

    $scope.addIne = function(form){
        dbService.addIneDb($scope.ineAccount.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('IneAccountsDetailsCtrl', function($scope, $stateParams, dbService, ModalService, $state) {

$scope.addIne = function(form){
    dbService.addIneDb($scope.ineAccount.id, form.amount.$viewValue, form.date.$viewValue, form.note.$viewValue);
    $scope.load();
    $scope.closeModal();
    $state.reload();
}

• javascript
• angularjs
• ionic-framework

• After updating the data... try to reload the state – Anil kumar Commented Feb 12, 2016 at 5:27
• How would you reload the state from within the controller? – John Commented Feb 12, 2016 at 6:22
• @Anilkumar This worked. I added $state as a dependency in the controller then called $state.reload() at the end of the addIne function. – John Commented Feb 12, 2016 at 6:50
• Ok I will post a sample answer ... Please accept it and Upvote it @John – Anil kumar Commented Feb 12, 2016 at 6:52
• Thank you so much :) for accepting the answer – Anil kumar Commented Feb 12, 2016 at 6:59

5 Answers 5

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

Push newly added record to $scope.ineAccountRecords.

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

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

try this

  router.setUpRoutes();