How to stop reloading or re-rendering ui-views

Question

I have 2 ui-views in one page, based on the click of navbar links I want to load only ui-view="content" but here when I click on any link both views getting updated, I have tried multiple things but didn't work, please suggest a method to handle this.

<nav class="navbar navbar-default">
    <ul class="nav navbar-nav navbar-right">
        <li ui-sref-active="active">
            <a ui-sref="events">events</a>
            <a ui-sref="members">members</a>
        </li>
    </ul>
</nav>
<div class="container">
    <div class="row">
        <div class="col-lg-8">
            <div ui-view="content"></div>
        </div>
        <div class="col-lg-4">
            <div ui-view="right_content"></div>
        </div>
    </div>
</div>

JS code:

$stateProvider.state('events', {
    url: '',
    views: {
        content: {
            templateUrl: 'events',
            controller: 'eventsController',
            controllerAs: "data",
        },
        right_content: {
            templateUrl: "right_content",
            controller: 'rightPanelController',
            controllerAs: "data",
        },
    }
});

How handle to this situation?