AngularJS / Ionic routing using $stateProvider - controller is not reloading the second time a state is called

Question

Original Question

I'm developing a mobile app using the Ionic Framework and AngularJS and I am having issues with controllers not reloading once they have been initialised.

One of the state transitions (from 'app.postbox-details' to 'app.audit-questions') should pass a parameter to the 'app.audit-questions' controller but this controller does not update itself with the new parameter because it isn't reloading.

Code Example

app.js file - config

angular.module('sf-maintenance', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova'])           
.config(function ($stateProvider, $urlRouterProvider, $httpProvider) {
    $stateProvider
       .state('home', {
           url: '/home',
           templateUrl: 'templates/home.html',
           controller: 'HomeCtrl',
       })
       .state('app', { //app state being the side-menu
           url: '/app',
           abstract: true, //means that this state will never be activated directly, users will always go to a child state instead.
           templateUrl: 'templates/side-menu.html',
           controller: 'MenuCtrl'
       })       
       .state('app.postbox-details', {
           url: '/postbox-details',
           views: {
               'menuContent': {
                   templateUrl: 'templates/postbox-details.html',
                   controller: 'PostboxDetailsCtrl'
               }
           }
       })
    .state('app.audit-questions', {
        url: '/audit-questions/:postboxGuid',
        views: {
            'menuContent': {
                templateUrl: 'templates/audit-questions.html',
                controller: 'AuditCtrl'
            }
        }
    })
    $urlRouterProvider.otherwise('/home');
});

controller.js file (left out the code that isn't relevant)

angular.module('starter.controllers', [])    
.controller('HomeCtrl', function ($scope) {
})    
.controller('MenuCtrl', function ($scope) {
})    
.controller('PostboxDetailsCtrl', function ($scope, $ionicLoading, $ionicPopup, $cordovaBarcodeScanner, $state, DataService) {

    $scope.postboxGuid = DataService.getNewGUID();
    //Rest of the controller functions are below
})    
.controller('AuditCtrl', function ($scope, $ionicSlideBoxDelegate, $stateParams, DataService) {

    $scope.auditDetails = {
        postboxGuid: $stateParams.postboxGuid
    };    
});

View - navigation code

The view code to perform the navigations all use <a> tags:

• From the home view to the postbox-details view: <a class="button button-block button-dark icon-right ion-chevron-right" href="#/app/postbox-details">New inspection</a>
• From the postbox-details view to audit-questions view: <a class="button button-block button-dark icon-right ion-chevron-right" ng-click="saveFormData()" ng-href="#/app/audit-questions/{{postboxGuid}}">New audit</a>

So does anybody know how to get controllers to reload once it has been initialised or if I am going about this problem the wrong way could you guide me to a method that will work?

---

Updated Information

I recently saw a related question and the response by @Radim Köhler pointed to the answer in this question which provides good information on why it may not be a good idea to use cache:false on a view because of performance.

I thought I would share this because in some situations you may benefit more performance-wise by using one of Ionic's built-in view life cycle events to run code without having to disable the view from being cached.

Answer 1

Views are standard cached in ionic. The caching can configured in the view or stateprovider.

http://ionicframework.com/docs/api/directive/ionNavView/