Angularjs Switch Tab View Using Ui.bootstrap

I have set up two buttons to switch to other two tabs on click, but it is not working. here is the html code:

Copy

and injecting the ui.bootstrap dependency.

varapp= angular.module('app', ['ui.bootstrap']);

var app = angular.module('app', ['ui.bootstrap']);

app.controller('TabCtrl', function($scope) {
  
$scope.tabs = [{active: true}, {active: false}, {active: false}];
$scope.go_tab1 = function() {
    $scope.tabs[1].active = true;
};
$scope.go_tab2 = function() {
    $scope.tabs[2].active = true;
};

});

<linkhref="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"rel="stylesheet"><scriptsrc="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script><scriptsrc="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script><scriptsrc="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script><scriptsrc="app.js"></script><bodyng-app="app"><divng-controller="TabCtrl"><uib-tabsetclass="tabbable"><uib-tabheading="my tab 0"ng-attr-active="tabs[0].active"><divclass="row"><aclass="btn btn-wide btn-azure"ng-click="go_tab1()">
            Go To tab 1
            </a><aclass="btn btn-wide btn-azure"ng-click="go_tab2()">
            Go To tab 2
            </a></div></uib-tab><uib-tabheading="my tab 1"ng-attr-active="tabs[1].active"><divclass="row"></div></uib-tab><uib-tabheading="my tab 2"ng-attr-active="tabs[2].active"><divclass="row"></div></uib-tab></uib-tabset></div></body>

Share