html angularjs angular-ui-bootstrap angular-ui-bootstrap-tab

ng-Click affects to different controller

I am using angularjs UI bootstrap to make tabs. I have buttons in navbar that switches to different tabs. navbar with its own controller is nested inside the main controller. I wanted to know on how to make the buttons in the navbar switch tabs too.

i have a plunk here or html and js below

<div ng-controller="TabsDemoCtrl">
<header>

  <div ng-controller="navbarcontroller">
    <div class="navbar-header">
      <a class="navbar-brand" >Brand
      </a>
    </div>
    <div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'">
      <ul class="nav navbar-nav navbar-right" style="pointer-events: auto;">
        <li>
            <!-- this buttons dosnt works --> 
            <button type="button" class="btn btn-default btn-sm" ng-click="active = 1">Select 1st tab</button>
            <button type="button" class="btn btn-default btn-sm" ng-click="active = 2">Select 2nd tab</button>
        </li>
      </ul>
    </div>
  </div>
</header>
<p> -----  navbar controller ends here ----- </p>

<hr>

  <p> ---- tab controller starts here ------ </p>
   <!-- this buttons  works --> 
  <button type="button" class="btn btn-default btn-sm" ng-click="active = 1">Select 1st tab</button>
  <button type="button" class="btn btn-default btn-sm" ng-click="active = 2">Select 2nd tab</button>

  <uib-tabset active="active">
    <uib-tab index="1"  heading="Tab1" >
      Content 1
    </uib-tab>
    <uib-tab index="2"  heading="Tab1" >
      Content 2
    </uib-tab>
  </uib-tabset>
</div>

this is the js file

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo')

.controller('TabsDemoCtrl', function ($scope, $window) {

})


.controller('navbarcontroller', function ($scope, $window) {

});

Solution

You have to share your active property between both controllers. For that we need to change a little bit some things.

1- You have to implement a service (let's call it tabSelector), something like this:

.service('tabSelector', function(){
});

2- Now, in both TabsDemoCtrl and navbarcontroller you need to use the previously created service and implement two functions which use the tabSelector service, like this:

//this should be done with 'TabsDemoCtrl' and 'navbarcontroller' (this last one was omitted for brevity)
.controller('TabsDemoCtrl', function ($scope, $window, tabSelector) {

    //set the active tab
    $scope.selectTab = function(tab){
      tabSelector.active = tab;
    }
    //keep synced the active tab
    $scope.getActive = function(){
      return tabSelector.active;
    }

})

3- In your view:

Replace the content of the ng-clik(active = 1) with this : selectTab(1) (functions in the controllers). Note that you have to replace 1 for the proper value.
And the content of <uib-tabset active="active"> for <uib-tabset active="getActive()">

Please, refer to this working example (your plunker forked)

You can find some related info here: