How to use bootstrap tab/nav pills in kibana plugin Editor Panel

[tarun_kumar]

I am trying to make kibana plugin which would be having Editor Panel with two tabs similar to "Data & Options Tabs" in kibana default/core visualizations editor Panels and for that i am trying to use bootstrap nav-pills as

W3Schools online HTML editor

I have two divs in tab-content div as

<div class="container" style="width: 467px;">
  <ul class="nav nav-pills">
<li class="active" style="color:cornsilk;"><a data-toggle="pill" href="#esTab" style="color: #3BBEB1;" target="_">Source1</a></li>
<li style="color: cornsilk;"><a data-toggle="pill" href="#accumuloTab" style="color: #3BBEB1;">Source2</a></li>
  </ul>
  <div class="tab-content">
    <div id="esTab" class="tab-pane fade in active">
     esTanb
    </div>
        <div id="accumuloTab" class="tab-pane fade">
          <h3>Menu 2</h3>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
        </div>
    </div>
  </div>

So, normally when one clicks on any of li in nav-pills ul, like Source1 or Source 2 ,UI switches to respective div in tab-content div as per id based href but in case of a kibana plugin when I Click on Source2 nav-pills/tab , kibana routes me first to ipAddress:5601/app/kibana#/accumuloTab then to ipAddress:5601/app/kibana#/discover default url.
So, In case of kibana visualization plugins(not application plugins) ,how do i make sure my bootstrap tabs work correctly?

Editted :
I have also tried kibana wiki suggestion regarding href to be used as kbn-href as below but no success which says :

Considerations for basepath | Kibana Guide [8.11] | Elastic

Write the src or href urls as you would without the base path, but
then replace src or href with kbn-src or kbn-href.

[shaunak (Shaunak Kashyap)]

Hi @tarun_kumar,

When you use href or ng-href, you actually change the route of the page. Thats why you are getting routed to ipAddress:5601/app/kibana#/accumuloTab. Then, since Kibana's router doesn't understand this route, it is redirecting you to its default route, which happens to be ipAddress:5601/app/kibana#/discover.

Take a look at how "Data" and "Options" are accomplishing their switching:

In particular, note the use of ng-click coupled with ng-class.

[tarun_kumar]

Thanks a lot shaunak sir for replying back.
So,Is using our own locationRouter or stateRouter not possible for custom visualization?
I thought i would use ng-hide/ng-show for last solution as that would need lot content on same page as the number of tabs would increase in my case.so it could have been better if i would have been able to use router and ng-view combination to show different template on request. But problem is i have only seen that done in case of kibana applications like kibi and timelion and haven't seen anyone's custom visualization plugin doing that.
Thanks a lot once again.
Tarun kumar