动态更改uib-tabset属性中的值

Question

In my project I use ui.bootstrap.tabs . On md and lg screens tabs should appear vertically stacked, but on screens sm and xs I want to see them appear horizontally. All I need is to set value in vertical attribute either true or false. When screen size is changed, I have match on md or lg sizes and set property vertical_tab_appearance = true and the same with sm and lg sizes, property has false value, but uib-tabset directive does not know that the value of that property has changed.

 <div class="col-md-2 small hidden-print">
        <div ng-model="value">
            <uib-tabset vertical="vertical_tab_appearance" type="pills"> 
                <uib-tab></uib-tab>
            </uib-tabset> 
        </div>
</div>

Here is my screen size events:

 screenSize.on('md, lg', function (match) {
   if (match) {
       $scope.vertical_tab_appearance = true;
   }
  });

 screenSize.on('sm, xs', function (match) {
   if (match) {
       $scope.vertical_tab_appearance = false;
    }
  });

Can I do something here or I should use ng-if in this situation?

Answer 1

If someone else will face the same problem, here is a solution. I decided to use uibTabsetDirective decorator in module config and add watcher to a vertical attribute in a linking function.

.config(function ($provide) {
            $provide.decorator('uibTabsetDirective', function($delegate) {
                var directive, link, scope;
                directive = $delegate[0];
                link = directive.link;
                scope = directive.scope;
                scope['vertical'] = '=';
                directive.compile = function() {
                  return function Link(scope, element, attrs, ctrls) {
                    scope.$watch(attrs.vertical, function() {
                        console.log(scope.vertical);
                    });

                    return link.apply(this, arguments);
                  };
                };
                return $delegate;
            });
        });