How to click a particular tab using Angular and how to include Angular UI in the code

Problem

I am using Angular UI Bootstrap http://angular-ui.github.io/bootstrap/. I have two questions:

  1. I followed the example given at angular-ui.github.io, there they use

    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js">
    

    but I don't want to use the CDN so I downloaded Angular UI and added it to my project. How to include it into my code? I did add ['ui.bootstrap'] to my angular.module, but it's not working until I add the above script code.

  2. I'm using <tabset> to create two tabs, contacts and group. For example, a user is in the Group tab, he wants to add members to an existing group, so if he clicks the Add Member button, I want to navigate to the Contacts tab automatically.

    I thought of using document.getElementByTagName() inside my controller. Will it work? And what is the Angular way to click something programmatically.

Problem courtesy of: user3244665

Solution

Question #1:

<script src="folder_of_js/ui-bootstrap-tpls-0.10.0.js"></script>

Question #2:

You don't use document.getElementByTagName() with AngularJS, if you want to navigate to a tab while you are in another tab's content, an example might be the following:

<tabset>
   <tab ng-repeat="tab in tabs" heading="{{tab.title}}">
      {{tab.content}}
      <button class="btn btn-default btn-sm" ng-click="tabs[2].active = true">Select third tab</button>
   </tab>
</tabset>

As you can also see in this plunker, I added a button that navigates to the third tab whenever you click it.

Solution courtesy of: anvarik

Discussion

The script file is probably not loaded by the browser. You have to add a script tag pointing to where the file is in your project. For example, if the script is placed in the folder /scripts/lib/:

<script src="/scripts/lib/ui-bootstrap-tpls-0.10.0.js" />

One of the golder rules of AngularJS is to never, for any reason, referrence the DOM (i.e. an HTML element) from a controller. So while document.getElementByTagName() will technically work, I would advice against it.

In angular, you really don't click things programmatically. The common way is to bind something in your HTML to a variable in the $scope, either by curly brackets ({{someVariable}}), or by directives such as ng-class, ng-bind etc. Then you change that variable in $scope, and the HTML changes to reflect that. Is there a variable in $scope which determines which tab is open? If so, you can just change that variable, and it should work automagically.

Discussion courtesy of: MW.

This recipe can be found in it's original form on Stack Over Flow.