angular-ui-bootstrap: How to swap between vertical and horizontal tab-set views

Question

Currently I use a isNotMobileView passed down to the template through the controller $scope.isNotMobileView :

<uib-tabset active="0" vertical="isNotMobileView">
  <uib-tab index="0" heading="foo">
    ...
  </uib-tab>
  ...
</uib-tabset>

However, this does not dynamically change the rendered uib-tabset as I switch orientations/switch screen sizes. How do I do that? (I'm seeking similar behavior as Twitter bootstrap's hidden-xs etc. elements that hide and alter elements as I change screen size) I do not want to duplicate the uib-tabset as it wouldn't be that maintainable.

Answer 1

From the docs

vertical $ (Default: false) - Whether tabs appear vertically stacked.

The $ sign means the property expects and expression but it doesn't have a watcher applied to it

$ - This setting expects an angular expression instead of a literal string. If the expression support a boolean / integer, you can pass it directly.

This means you provide an expression that will resolve to either true or false and will initialize your tabset to that setting, but you can't change that later on.

I do not want to duplicate the uib-tabset as it wouldn't be that maintainable.

Unless you want to request a feature or implement it on your own, you'll have to make a copy and toggle it using ngIf or something. You can make them more maintainable (small) by showing and hiding directives outside the tabs-set according to the index value, the active property has a watch on it

active (Default: Index of first tab) - Active index of tab. Setting this to an existing tab index will make that tab active.