how can I select a tab from outside controller

Question

I'm using Tabs (ui.bootstrap.tabs) control\directive described here. The control creates it's own controller which sets active tab:

.controller('TabsetController', ['$scope', function TabsetCtrl($scope) {
  var ctrl = this,
      tabs = ctrl.tabs = $scope.tabs = [];

  ctrl.select = function(selectedTab) {
    angular.forEach(tabs, function(tab) {
      if (tab.active && tab !== selectedTab) {
        tab.active = false;
        tab.onDeselect();
      }
    });
    selectedTab.active = true;
    selectedTab.onSelect();
  };

Tabset child tab controls (child elements) can trigger parent's select function when clicked on them.

.directive('tab', ['$parse', function($parse) {
  return {
    require: '^tabset',
    scope: {
      onSelect: '&select',

I have my custom controller upwards the DOM which needs to trigger select function on TabsetController to set first tab active. I've read that I could use event broadcasting but I can't modify TabsetController to bind event listener so this doesn't seem to be a viable option. Any suggestions?

EDIT:

Please see Plunker for better understanding - here.

not clear what makes your setup different than the demo. Demo shows how to switch tabs at local controller level already. Can you modify the plunker example to show more about what your issue is? — charlietfl, Jul 13 '14 at 19:54
[Here](http://plnkr.co/edit/RClxbaGFQ1Y4Jznd0XDw) I've created the Plunk. What I need to do is to always select first tab whenever there is a click on a word inside `div.words` container. Currently if the second tab is selected and there is a click on a word inside `div.words` the second tab remains active. — Max Koretskyi, Jul 14 '14 at 06:13
is this what you're looking for? http://plnkr.co/edit/qJcMXVRQvBhQCMkvZsM3?p=preview — kihu, Jul 14 '14 at 08:51
Thanks, but I don't understand how it works. The directive definition requires controller which contains this line `tabs = ctrl.tabs = $scope.tabs = [];`. So how is `tabs` property shared between `MainController` and `TabsetController` which is required by `tabset` directive? — Max Koretskyi, Jul 14 '14 at 09:02
Hey, I added explanation in the answer. I don't see the line you mention in bootstrap demo, where did you get it from? — kihu, Jul 14 '14 at 09:17
The second comment to this question should be in the question itself. — Michael Kang, Jul 14 '14 at 09:21
@pixelbits, yeah, you're right, I created another separate question [here](http://stackoverflow.com/questions/24733416/what-happens-to-scope-property-if-two-controllers-that-apply-to-one-html-element). — Max Koretskyi, Jul 14 '14 at 09:30

score 0 · Accepted Answer · edited May 23 '17 at 12:20

0

You can declare a scope attribute within the "parent" controller and it will be accessible in the child controller. see: AngularJS - Access to child scope

Because TabsetController is set on a child DOM element while the MainController is set on a parent element, you can define and manipulate $scope.tabs in the MainController, and it will be seen and intepreted in TabsetController.

edited May 23 '17 at 12:20

Community

1
1

answered Jul 14 '14 at 09:15

kihu

842
5
13

Thanks, but the `tabs` property gets overriden by this line: `tabs = ctrl.tabs = $scope.tabs = [];`. You can see this line in `TabsetController` definition inside `ui.bootstrap.js` file [here](https://github.com/angular-ui/bootstrap/blob/master/src/tabs/tabs.js). – Max Koretskyi Jul 14 '14 at 09:19
I created another separate question [here](http://stackoverflow.com/questions/24733416/what-happens-to-scope-property-if-two-controllers-that-apply-to-one-html-element). – Max Koretskyi Jul 14 '14 at 09:30

how can I select a tab from outside controller

1 Answers1

Linked