ui-router is reloading controller

Issue

Using ui-router 1.0.6.

Every time I return to an url (using ui-sref) it reloads the controller. I would like to avoid that and to load the controller only the first time it is accessed.

In this example Plunkr: every time I switch repeatedly between Hello and About it logs the console.

Solution

It can be wrapped in a parent controller to track who's already loaded

Here is a working example: Plnkr

Basically you create another controller that holds an object with an empty list:

myApp.controller('ModuleNumCtrl', function() {
  loadedCtrl = {};
});

And set it to be parent by setting the abstract attribute to true:

var parentState = {
  abstract: true,
  name: 'parent',
  controller: 'ModuleNumCtrl'
};

Then you set the the exiting controllers to be his children by prefixing their names with 'parent.'

var helloState = {
  name: 'parent.hello',
  url: '/hello',
  template: '<h3>hello world!</h3>',
  controller: 'ModuleTwoCtrl'
};

var aboutState = {
  name: 'parent.about',
  url: '/about',
  template: '<h3>Its the UI-Router hello world app!</h3>',
  controller: 'ModuleOneCtrl'
};

$stateProvider.state(parentState);
$stateProvider.state(helloState);
$stateProvider.state(aboutState);

Then on each controller you want to load only once, you can add it to the list the first time it's loaded and the code that you want to run only once put in an if statement:

myApp.controller('ModuleOneCtrl', function() {

  if (!loadedCtrl.one) {
    console.log("One");
  }

  loadedCtrl.one = true;

});

Last thing, don't forget to change the HTML with the new controllers names:

<a ui-sref="parent.hello" ui-sref-active="active">Hello</a>
<a ui-sref="parent.about" ui-sref-active="active">About</a>

Answered By - Moshe Quantz