linyuanxie linyuanxie - 1 year ago 170
AngularJS Question

How to access angular bootstrap UI from controller

I am trying to use angularJS bootstrap tabset, in my requirement, I need to add a next button to let customer to switch tabs.
Here is my code:

<div ng-controller='ctr'>
<tab active='sqTab' heading="tab1">
tabt 1
<tab active='psTab' heading="tab2">
tabt 2
<button click='next()')>next</button>

In the controller "ctr":

$scope.sqTab = true;
$scope.psTab = false;
$ = function(){
$scope.sqTab = false;
$scope.psTab = true;

As you can see, I set active for each tab, it works fine when the page load,I can switch to tab2 after I hit next, but if I click tab head to switch back, and try to hit next button again, it didn't work,it may be the reason the directive is isolated scope, I can't access it's active, but if so why I can switch first time? Is there any way I can do it?

Lex Lex
Answer Source

You didn't use the AngularJS-UI bootstrap directives. Here is a working sample based on what you have.


angular.module('app', ['ui.bootstrap'])
    .controller('ctrl', function($scope) {
        $scope.activeTab = "sqTab";
        $ = function() {
            $scope.activeTab = "psTab";


<div ng-app="app" ng-controller="ctrl">
    <form class="tab-form-demo">
        <uib-tabset active="activeTab">
            <uib-tab index="'sqTab'" heading="tab1">
                Here is some content on Tab 1
            <uib-tab index="'psTab'" heading="tab2">
                Here is some different content on Tab 2
        <button ng-click="next()">next</button>

Notice that when using a string index you have to put quotes around it. Also notice that the uib- version of all the bootstrap elements need to be used. Here is a working JSFiddle using the above code.