Angular UI Bootstrap Carousel and Tabs collision when they are on same page

Question

I am using angular UI Bootstrap for an angularjs project. I have a page with Carousel and Tabs (both are on the same page).

The problem is that the Tabs are switching with respect to the Carousel slides and the Carousel slides are moving whenever I click on the Tabs.

Please help me if there is any way to prevent this.

Plunker here

Thank you very much.

View:

<div ng-controller="CarouselDemoCtrl">
  <div style="height: 305px">
    <uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
      <uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
        <img ng-src="{{slide.image}}" style="margin:auto;">
        <div class="carousel-caption">
          <h4>Slide {{slide.id}}</h4>
          <p>{{slide.text}}</p>
        </div>
      </uib-slide>
    </uib-carousel>
  </div>
  <div style="background-color:green;color:white;height:50px;width:100%">
    <h1>Some other content</h1>
  </div>
  <br><br>
  <uib-tabset active="active">
    <uib-tab heading="Tab One"><h1>Tab 1 content</h1></uib-tab>
    <uib-tab heading="Tab Two" classes="btn-sm"><h2>Tab 2 content</h2></uib-tab>
    <uib-tab heading="Tab Three"><h1>Tab 3 content</h1></uib-tab>
    <uib-tab heading="Tab Four" classes="btn-sm"><h2>Tab 4 content</h2></uib-tab>
  </uib-tabset>
</div>

Controller:

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
  $scope.myInterval = 5000;
  $scope.noWrapSlides = false;
  $scope.active = 0;
  var slides = $scope.slides = [];
  var currIndex = 0;

  $scope.addSlide = function() {
    var newWidth = 600 + slides.length + 1;
    slides.push({
      image: 'http://lorempixel.com/' + newWidth + '/300',
      text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
      id: currIndex++
    });
  };

  for (var i = 0; i < 4; i++) {
    $scope.addSlide();
  }

  // Randomize logic below

  function assignNewIndexesToSlides(indexes) {
    for (var i = 0, l = slides.length; i < l; i++) {
      slides[i].id = indexes.pop();
    }
  }

  function generateIndexesArray() {
    var indexes = [];
    for (var i = 0; i < currIndex; ++i) {
      indexes[i] = i;
    }
    return shuffle(indexes);
  }

  // http://stackoverflow.com/questions/962802#962890
  function shuffle(array) {
    var tmp, current, top = array.length;

    if (top) {
      while (--top) {
        current = Math.floor(Math.random() * (top + 1));
        tmp = array[current];
        array[current] = array[top];
        array[top] = tmp;
      }
    }

    return array;
  }
});

Answer 1

just change the active attribute and put unique one for each component for example

<uib-carousel active="activeCarousel"
....
<uib-tabset active="activeTab">


  $scope.activeTab = 0;
  $scope.activeCarousel = 0;

cheers