title: Angularjs: Refresh view after model changes
body: <p>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.</p>
  
  <p>income_account_details.html</p>
  
  <pre><code>&lt;ion-view view-title="Account Details: {{incomeAccount.accountName}}"&gt;
      &lt;ion-nav-buttons side="right"&gt;
          &lt;button class="button button-icon" ng-click="newIncome()"&gt;
              &lt;i class="ion-android-add icon"&gt;&lt;/i&gt;
          &lt;/button&gt;
      &lt;/ion-nav-buttons&gt;
      &lt;ion-content&gt;
          &lt;ion-list&gt;
              &lt;div class="list card" ng-repeat="record in incomeAccountRecords"&gt;
                  &lt;div class="item item-divider"&gt;
                      &lt;h2&gt;{{record.date}}&lt;/h2&gt;
                  &lt;/div&gt;
                  &lt;div class="item item-body"&gt;
                      &lt;p&gt;${{record.amount}} note: {{record.note}}&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/ion-list&gt;
      &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p>controller.js</p>
  
  <pre><code>...
  .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();
      }
  })
  ...
  </code></pre>
  
  <p>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.</p>
  
  <p>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" </p>
  
  <p>Is there a way to refresh the view after the model is updated?</p>
  
  <p><strong>Edit:</strong> I was able to reload the state by injecting $state into the controller and calling $state.reload() to refresh the page.</p>
  
  <pre><code>.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();
  }
  </code></pre>