title: Proper use of views and subviews in AngularJS
body: <p>I'm new to AngularJS and I'm struggling a little bit with my multiple views. Maybe someone can shed a light on how this should be done.</p>
  
  <p>What I'm trying to achieve:
  I'm trying to implement some kind of file explorer, where there are two columns: the left column contains all subfolders and files in a folder, the right column shows detail infos when a file or a folder is clicked. When the user double-clicks a folder the view should refresh and list the subfolder while the detail column should be cleared.</p>
  
  <p>It's basically working more or less but the left column is refreshing always even if it shouldn't. And I'm pretty sure it's very hacky, but I don't know how to improve this.</p>
  
  <p>I'm using ui-router for the multiple views and Restangular for REST-calls, which I replaced with dummy data in this example.</p>
  
  <p>Bootstrapping:</p>
  
  <pre><code>// app.js
  var app = angular.module('explorer', ['ui.compat']);
  </code></pre>
  
  <p>This is my main template:</p>
  
  <pre><code>// app.html
  [...]
  [...]
  &lt;div ui-view&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This is the container template, that is loaded at the very beginning:</p>
  
  <pre><code>// files.html
  &lt;div ui-view&gt;&lt;/div&gt;
  &lt;div ui-view="details"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This is the template for the file list on the left:    </p>
  
  <pre><code>// files-list.html
  &lt;table&gt;
      &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Filename&lt;/th&gt;
          &lt;th&gt;Size&lt;/th&gt;
          &lt;th&gt;Modified&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;tr data-ng-repeat="file in files"&gt;
          &lt;td&gt;&lt;a href="#/{{ file.type }}/{{ file.id }}"&gt;{{ file.name }}&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;{{ file.size }}&lt;/td&gt;
          &lt;td&gt;{{ file.modified }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And this is the details template:</p>
  
  <pre><code>// files-details.html
  &lt;div&gt;{{ file.name }}&lt;/div&gt;
  </code></pre>
  
  <p>This is the first controller for displaying the list in the left column (sorry, it's CoffeScript):</p>
  
  <pre><code>app.controller 'ListController', ['$scope', '$state', ($scope, $state) -&gt;
    $scope.files = [{
      "id": "12", "type": "folder", "name": "testfolder", "size": "", "modified": "01.01.2000"
    }, {
      "id": "54", "type": "file", "name": "testfile", "size": "23kb", "modified": "01.01.2000"
    }]
  ]
  </code></pre>
  
  <p>And this is the details controller:</p>
  
  <pre><code>app.controller 'DetailsController', ['$scope', '$stateParams', ($scope, $stateParams) -&gt;
    $scope.file = { "id": "54", "type": "file", "name": "testfile", "size": "23kb", "modified": "01.01.2000"};
  ]
  </code></pre>
  
  <p>And these are my messy routing rules:</p>
  
  <pre><code>app.config ['$stateProvider', '$urlRouterProvider', ($stateProvider, $urlRouterProvider) -&gt;
    $urlRouterProvider
      .when('/folder', '/folder/1')
  
    $stateProvider.state 'list', {
      url: ''
      views: {
        '': {
          templateUrl: 'files.html'
        },
        'column1@list': {
          templateUrl: 'files-list.html'
          controller: 'ListController'
        },
        'column2@list': {
          templateUrl: 'files-detail.html'
        }
      }
    }
    $stateProvider.state 'folder', {
      abstract: yes
      templateUrl: 'files-list.html'
      controller: 'ListController'
    }
    $stateProvider.state 'folder.list', {
      url: '/folder/{id}'
      templateUrl: 'files-list.html'
      controller: 'ListController'
    }
  
    $stateProvider.state 'list.file', {
      url: '/file/{childId}'
      views: {
        '': {
          templateUrl: 'files-list.html'
          controller: 'ListController'
        }
        'details': {
            templateUrl: 'files-detail.html'
            controller: 'DetailsController'
          }
      }
    }
  ]
  </code></pre>