Search code examples
javascripthtmlangularjstwitter-bootstrapangularjs-routing

How do I access Javascript elements within my Angular ng-view using $routeProvider?

I am creating an Bootstrap/Angular app and using $routeProvider to render the views, and want to have tabs within one of those views. However, the active tab Bootstrap functionality isn't toggling. Here's what my index.html, app.routes.js, and main.html look like:

Index.html

<!doctype html>
<head>...</head>
<body ng-app="app">
 <nav>...</nav>
  <div ng-view=""></div>
...
 <script src="Scripts/jquery-1.9.1.min.js"></script>
 <script src="Scripts/angular.min.js"></script>
 <script src="Scripts/angular-route.min.js"></script>
 <script src="Scripts/bootstrap.min.js"></script>
 <script src="assets/js/custom.js"></script>
</body>

app.routes.js

var app = angular.module('app');

app.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'components/main/main.html',
            controller: 'MainCtrl',
            controllerAs: 'main'
        })
        ...

main.html

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#tab1">Tab1</a></li>
    <li><a data-toggle="tab" href="#tab2">Tab2</a></li>
    <li><a data-toggle="tab" href="#tab3">Tab3</a></li>
    <li><a data-toggle="tab" href="#tab4">Tab4</a></li>
</ul>

<div class="container">
    <div class="tab-content">
        <div id="tab1" class="tab-pane fade in active">
            ...
        </div>

        <div id="tab2" class="tab-pane fade">
            ...
        </div>

        <div id="tab3" class="tab-pane fade">
            ...
        </div>

        <div id="tab4" class="tab-pane fade">
            ...
        </div>
    </div>
</div>

How can I run my Javascript within the main.html route and more specifically get the Bootstrap active tab script working?

Solution

  • The problem is that AngularJS doesn't play well with Bootstrap's default JS. Upon another developer's recommendation, I replaced Bootstrap's JS with ui-bootstrap. Following the documentation there on tabs, I got my app working! Here's a good resource on the issue.