AngularJS - Angular UI-Router reload only nested view, not parent

Question

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:

Answer 1

There is a plunker with one modification. Instead of using very extreme setting reload: true, we can profit from native ui-router desing:

reload the state in case its declared param has changed

So, this would be the new state and controller definition:

.state('projects.edit.surveys', {
      resolve: {
        ... // unchanged
      },
      // here we declare param trigger
      url: "/surveys/{trigger}",
      views: { 
      '' : { 
            templateUrl: "projects.surveys.html",
            controller: function($scope, items, $state){
              $scope.items = items
              $scope.addSurvey = function(){

                // here we copy current params
                var params = angular.copy($state.params);
                // do some tricks to not change URL
                params.trigger = params.trigger === null ? "" : null;
                // go to the same state but without reload : true
                $state.transitionTo($state.current, params, { reload: false, inherit: true, notify: true })
              }
            }
        }
      }
    })

From a user perspective, param is changing but not its visibility - it is null or string.Empty ... Check that adjustment and a bit more native ui-router solution here