title: AngularJS - Angular UI-Router reload only nested view, not parent
body: <p>I know this is rather long, but I need to provide some context before my main question. I am creating a page that will be split into two columns. Here is the ui-router code:</p>
  
  <pre><code>  $urlRouterProvider.otherwise("/projects/edit")
  
    $stateProvider
      .state('projects', {
        url: "/projects",
        template: "&lt;div ui-view&gt;&lt;/div&gt;"
      })
  
      .state('projects.edit', {
        resolve: {
          test: function(){
            console.log('projects.edit resolve called')
          }
        },
        url: "/edit",
        templateUrl: "projects.html",
        controller: function($scope, $state){
          $state.go('projects.edit.surveys')
  
          $scope.transitionToOtherRoute = function () {
              $state.transitionTo('otherRoute')
          }
        }
      })
      .state('projects.edit.surveys', {
        resolve: {
          items: function(){
            var randomNumberArray = [1,2,3,4,5,6]
            //this will just shuffle the array
            for(var j, x, i = randomNumberArray.length; i; j = Math.floor(Math.random() * i), x = randomNumberArray[--i], randomNumberArray[i] = randomNumberArray[j], randomNumberArray[j] = x);
            return randomNumberArray
          }
        },
        url: "/surveys",
        views: {
          "viewA": { 
              templateUrl: "projects.surveys.html",
              controller: function($scope, items, $state){
              $scope.items = items
              $scope.addSurvey = function(){
                $state.transitionTo($state.current, $state.params, { reload: true, inherit: true, notify: true })
              }
            }
          }
        }
      })
      .state('otherRoute', {
        url: "/otherRoute",
        templateUrl:"otherRoute.html"
      })
  </code></pre>
  
  <p>Basically, the user will be transitioned to the <code>projects.edit</code> state, which has a template that looks like this: </p>
  
  <pre><code>&lt;h3&gt;PROJECTS.HTML PARTIAL&lt;/h3&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-md-6"&gt;
      Input Text: &lt;input type="text"&gt;&lt;br&gt;
      &lt;button type="submit" class="btn btn-primary" ng-click="updateProject()"&gt;Go to otherRoute&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="col-md-6"&gt;
      &lt;a ui-sref=".surveys"&gt;&lt;/a&gt;
      &lt;div ui-view="viewA"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The user will be presented with two columns. The left column will just have an input field and button, which when pressed will transition the user to the <code>otherRoute</code> state. </p>
  
  <p>When we transition to the <code>projects.edit</code> state, it's controller will call <code>$state.go('projects.edit.surveys')</code>, which will set up it's nested view in the right column. The <code>projects.edit.surveys</code> state will first resolve an array of numbers in a random order, which it will pass into the controller as a parameter called <code>items</code>. The <code>projects.surveys.html</code> partial will then be placed in the right column. It will show the list of numbers in a random order and have a button, which calls <code>$state.transitionTo($state.current, $state.params, { reload: true, inherit: true, notify: true })</code>. This button will reload the <code>projects.edit.surveys</code> state. The user will see the numbers in a different order, and any text in the input field in the left column will disappear.</p>
  
  <p>This can be seen in action in this Plunker: <a href="http://plnkr.co/edit/SK8hjMpw6kvPiTdVeEhz?p=preview">http://plnkr.co/edit/SK8hjMpw6kvPiTdVeEhz?p=preview</a>         </p>
  
  <p><strong>This all leads to my question: how can I only reload the content of the right column ie the nested view (<code>projects.edit.surveys</code>), without reloading the parent view (<code>projects.edit</code>)?</strong> I would like to be able press the button in the right column and only re-sort the numbers, which is done in <code>projects.edit.surveys</code> state's resolve, and not clear the input field in the left column (and not call the resolve methods in <code>projects.edit</code>). In other words, I'd like only refresh the right column <code>projects.edit.surveys</code> state, without affecting anything in the left hand <code>projects.edit</code> state. </p>
  
  <p>Any help would be greatly appreciated!!!    </p>