Is it possible to reload only a view inside a state in AngularJS?

Question

my problem is that I have two different views inside a AngularJS state, as seen beneath:

$stateProvider.state('root.base.persons', {
    url : 'persons/:id',
    views : {
        'level-1@root' : {
            templateUrl : 'html/person-level-1.html',
            controller : 'PersonLevel1Controller',
            controllerAs : 'personLevel1Ctrl'
        },
        'level-1-tabs@root' : {
            templateUrl : 'html/person-tabs.html',
            controller : 'PersonTabsController',
            controllerAs : 'personTabsCtrl'
        }
    },

Let's say the first view of the code above is a header in a webpage, and beneath it I have different views being loaded. I'm having a hard time discovering how can I refresh the content of the header when a refresh button that is placed in the header is clicked, without triggering the same reload in the "child" views/states beneath this parent state. I've tried $state.reload , $state.go and $state.transitionTo but I can't seem to find the answer to it.

Basically, is it possible in Angular to reload only a view inside a state?

Appreciate your time and answers. Regards

Answer 1

Use:

var options = { reload: true };
$state.go(to, params, options);

$state.go options

reload (v0.2.5) - {boolean=false|string|object} , If true will force transition even if no state or params have changed. It will reload the resolves and views of the current state and parent states. If reload is a string (or state object), the state object is fetched (by name, or object reference); and \\ the transition reloads the resolves and views for that matched state, and all its children states.

— UI-Router API Reference - $state.go options