title: AngularJs nexted view
body: <p>Hi I am going to start a project.
  In tablet page contains list of items on left side and item detail on right side as shown in below image.<img src="https://i.stack.imgur.com/Mjcma.png" alt="enter image description here"></p>
  
  <p>In mobile It shows list of items on one page and detail of activity on another page, like below images.<img src="https://i.stack.imgur.com/YkqWW.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/oNzkU.png" alt="enter image description here"></p>
  
  <p>I have used AngularJs to  implemented this application like this(pseudo code)</p>
  
  <h2>Index.html</h2>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;&lt;/head&gt;
    &lt;boby&gt;
       &lt;ui-view&gt;&lt;/ui-view&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <h2>List.html</h2>
  
  <pre><code>&lt;ul&gt;&lt;li ng-repeat='item in items' &gt;{{item.title}}&lt;/li&gt;&lt;/ul&gt;
  
  &lt;div id="middleContent" ui-view style="padding-left: 320px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <h2>detail.html</h2>
  
  <pre><code>&lt;div&gt;Acitivity detail &lt;div&gt;
  </code></pre>
  
  <h2>config.js</h2>
  
  <pre><code>app = angular.module('MyApp', ['ui.router']);
  app.config(function ($stateProvider, $urlRouterProvider) {
  
          $stateProvider.state('List', {
              url: '/List',
              templateUrl: 'Partial/List.html',
              controller: 'ListController'
          })
          $stateProvider.state('Detail', {
              url: '/Detail/:id',
              templateUrl: 'Partial/Detail.html',
              controller: 'DetailController'
          })
  
          $stateProvider.state('TabletList', {
              url: '/TabletList',
              data: { 'parent': 'tablet' },
              templateUrl: 'Partial/List.html',
              controller: 'ListController'
          })
  
  
          $stateProvider.state('TabletList.Detail', {
              url: '/Detail/:id',
              templateUrl: 'Partial/Detail.html',
              controller: 'DetailController',
          })
  
      })
  </code></pre>
  
  <hr>
  
  <h2>In Controller.js</h2>
  
  <pre><code>app.controller('ListController',function(){
  
  if($(window).width() &gt; mobileView )( $state.go('TabletList.Detail'))
  
  })
  </code></pre>
  
  <hr>
  
  <p>In List.html I have use next view</p>
  
  <pre><code>&lt;div id="middleContent" ui-view style="padding-left: 317px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>It get loaded in case of tablet . otherwise it is useless there.</p>
  
  <p>Is there some simple way to handle this scenario. please help</p>
  
  <p>with regards</p>