title: Save previous state - angular ui-router
body: <p>This is a code of a tutorial about ui router. I have a question about it.</p>
  
  <p>I am trying to find a way to save the previous state for viewB in the code below. What I mean - you can see that route1 state has content only for viewA, viewB isn't there. </p>
  
  <p>My question is - is it possible when I choose route1 state, the viewA to be updated with the template route1.viewA but the right not to be updated to be empty, but the previous content of the right box - route2.viewB or index.viewB to stay there depends on the previous state?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="myapp"&gt;
  &lt;head&gt;
      &lt;title&gt;AngularJS: UI-Router Quick Start&lt;/title&gt;
      &lt;link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet"&gt;
   &lt;/head&gt;
   &lt;body class="container"&gt;
     &lt;div class="navbar"&gt;
       &lt;div class="navbar-inner"&gt;
         &lt;a class="brand" ui-sref="index"&gt;Quick Start&lt;/a&gt;
         &lt;ul class="nav"&gt;
           &lt;li&gt;&lt;a ui-sref="index"&gt;Home&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a ui-sref="route1"&gt;Route 1&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a ui-sref="route2"&gt;Route 2&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
       &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="row"&gt;
       &lt;div class="span6"&gt;
         &lt;div class="well" ui-view="viewA"&gt;&lt;/div&gt;        
       &lt;/div&gt;
       &lt;div class="span6"&gt;
         &lt;div class="well" ui-view="viewB"&gt;&lt;/div&gt;        
       &lt;/div&gt;
     &lt;/div&gt;
     &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"&gt;&lt;/script&gt;
     &lt;script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"&gt;&lt;/script&gt;
     &lt;script&gt;
       var myapp = angular.module('myapp', ["ui.router"])
       myapp.config(function($stateProvider){
       $stateProvider
       .state('index', {
          url: "",
          views: {
              "viewA": {
                  template: "index.viewA"
              },
              "viewB": {
                  template: "index.viewB"
              }
          }
      })
      .state('route1', {
          url: "/route1",
          views: {
              "viewA": {
                  template: "route1.viewA"
              }
          }
      })
      .state('route2', {
          url: "/route2",
          views: {
              "viewA": {
                  template: "route2.viewA"
              },
              "viewB": {
                  template: "route2.viewB"
              }
          }
      })
  })
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>