ui.bootstrap giving Multiple Directive Resource Contention error

Question

Adding ui.bootstrap to the dependency list , is generating the following error

How do i avoid this?
Do ask for more code if required.
I have removed a major chunk of the below code and only put the code which i thought is necessary.
I have kept the code for tab directive(which is mentioned in the error) and also the tabset directive which is required by the tab directive

JS snippet

angular.module("myApp",['ngAnimate','imgSliderDirective','coursesDirective','ui.bootstrap'])

.directive('tab',function(){
    return{
        restrict:'E',
        require:'^tabset',
        transclude:true,
        scope:{
            heading:"@"
        },
        template:'<div ng-show="active" ng-transclude></div>',
        link:function(scope,elem,attr,tabsetCtrl){
            scope.active = false;
            tabsetCtrl.add(scope);
        }
    }
})
.directive('tabset',function($window){
    return{
        restrict:'E',
        scope:{
            item:"=",
            newvar:"@",
            activestyle:"@",
            inactivestyle:"@"           
        },
        transclude:true,
        // require:'^userOptions',
        templateUrl:'/partials/tabset/tabset.html',
        // require:'imageSlider',
        bindToController:true,
        controllerAs:'tabset',
        controller:function(){

            var self = this;
            self.tabs = []
            self.add = function add(tab){
                self.tabs.push(tab);
                if(self.tabs.length === 1){
                    tab.active = true;
                    }
            }

            self.click = function click(selectedTab){
                angular.forEach(self.tabs,function(tab){
                     if(tab.active && tab !== selectedTab) 
                        tab.active = false;             
                })
            selectedTab.active = true;
            }
        },
        link:function(scope,element,attr,ctrl){
            console.log(ctrl.newvar )

            scope.resetInput = function(){
                console.log("in resetInput")
                ctrl.firstBox = "e"
                scope.item = "";
            }

            }
}
})

Answer 1

It's so happens that ui.bootstrap defines a directive tab with an isolate scope.

When you define yours, also with an isolate scope, you get 2 directives asking for an isolate scope on the same element, which is not supported.

In that regard, ui.bootstrap should have namespaced their directives - they didn't - but you should:

.directive("dreamerTab", function(){
  // etc...
})
.directive("dreamerTabset", function(){
  // etc..
})