title: how to avoid state reload using angular
body: <p>Have created an app that uses two separate areas to display data. One on top of the other (because that seemed like a cool idea:) )</p>
  
  <p>My problem is that both are controlled by states, and I can not figure out how to make it so that the underlying state is not updated when the top layer is. However, I want the underlying layer to always be there. </p>
  
  <p>This is how I have set up the states</p>
  
  <pre><code>.config(function ($stateProvider, $urlRouterProvider) {
          $urlRouterProvider.otherwise(''); //Setting the default to the padz
  
          $stateProvider
              .state('index', {
                  url: '',
                  views: {
                      "musicview": {
                          templateUrl: 'partials/music',
                          controller: 'MusicController'
                      },
                      "controlview": {
                          templateUrl: 'controlview/welcome',
                          controller: 'ControllerCV'
                      }
                  }
  
              })
              .state('about', {
                  url: 'about',
                  views: {
                      "musicview": {
                          templateUrl: 'partials/music',
                          controller: 'MusicController'
                      },
                      "controlview": {
                          templateUrl: 'controlview/welcome',
                          cotroller: 'ContrillerCV'
                      }
                  }
  
              })
              .state('config', {
                  url: 'config',
                  views: {
                      "musicview": {
                          templateUrl: 'partials/music',
                          controller: 'MusicController'
                      },
                      "controlview": {
                          templateUrl: 'controlview/config',
                          cotroller: 'ControllerCV'
                      }
                  }
              })
              .state('contact', {
                  url: 'contact',
                  views: {
                      "musicview": {
                          templateUrl: 'partials/music',
                          controller: 'MusicController'
                      },
                      "controlview": {
                          templateUrl: 'controlview/contact',
                          cotroller: 'ControllerCV'
                      }
                  }
              })
              .state('forum', {
                  url: 'forum',
                  views: {
                      "musicview": {
                          templateUrl: 'partials/music',
                          controller: 'MusicController'
                      },
                      "controlview": {
                          templateUrl: 'controlview/forum',
                          cotroller: 'ControllerCV'
                      }
                  }
              })
  </code></pre>
  
  <p>And this is the ui-views</p>
  
  <pre><code>&lt;div id="musiccontainer"&gt;
      &lt;div ui-view="musicview"&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;!-- End of container--&gt;
  
  &lt;div id="controllayer"&gt;
      &lt;% include controlview/controls/defaults.ejs %&gt;
          &lt;div id="controlwindow"&gt;
              &lt;div ui-view="controlview"&gt;
              &lt;/div&gt;
      &lt;/div&gt;
      &lt;% include controlview/controls/playlog.ejs %&gt;
  &lt;/div&gt;
  </code></pre>