title: angularjs ui router : nested views and nested states
body: <p>I'm new to angular and I'm trying to understand nested views concept.
  Based on the example provided in their documentation: <a href="https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views" rel="nofollow">https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views</a></p>
  
  <pre><code>//home.html
  &lt;body&gt;
    &lt;div ui-view="header"&gt;&lt;/div&gt;
    &lt;div ui-view="settings"&gt;&lt;/div&gt;
    &lt;div ui-view="content"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I have <code>settings.html</code> which has a check box. If it's checked it will load in the view(not named) the advanced settings template if not it will load the basic template</p>
  
  <pre><code>//settings.html
  &lt;input type="checkbox" ng-change="change()"  ng-model="advancedSettings" /&gt;
  &lt;div ui-view&gt;&lt;/div&gt;
  </code></pre>
  
  <p>so far I have defined something like this:</p>
  
  <pre><code>$stateProvider
    .state('home', {
      views: {
        'header': {},
        'settings': {
             templateUrl: 'settings.html'
         },
        'content': {},
      }
    })
  </code></pre>
  
  <p>since I have 2 templates <code>basicSettings.html</code> and <code>advancedSettings.html</code> that I need to load in the view from settings.html based on that checkbox, I thought I have to declare something like this:</p>
  
  <pre><code>.state('settings@home.basic',(){
      templateUrl: 'basicSettings.html'
  });
  </code></pre>
  
  <p>but it's not working, instead I receive a lot of errors on console. How is the best way to implement this, without removing names from homepage views(header,settings,content), also how do I change the view based on the check box?</p>
  
  <p>Thanks</p>