AngularJS - Use two different controllers?

Question

I am starting to play around with AngularJS and I'm not sure about how to update the navigation bar selection. I have 2 things in index.html, the navbar (with the tabs that I need to update) and the div with the ngView.

For the different views, I use ngRoute for changing the templates and attaching a controller to those templates. For the navbar, though, I'm not sure if I should just add "ng-controller="tabController" in the HTML. This doesn't seem correct, as I am already checking the route for the view, and I would be checking it twice.

Here is my code for the navbar and the div with the view, where the li that has the class "active" should be aligned with the view shown in the div:

<nav class="navbar navbar-default" ng-controller="tabController">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#/">Recetas Helper</a>
        </div>
        <ul class="nav navbar-nav">
            <li><a href="#/">Home</a></li>
            <li class="active"><a href="#/helper">Helper</a></li>
            <li><a href="#/insert">Insertar</a></li>
            <li><a href="#/randomizer">Randomizer</a></li>
        </ul>
    </div>
</nav>
<div class="main-view" ng-view></div>

And here is my app.js code, where the controllers are and the route is checked:

var app = angular.module('confApp', ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "partials/home.html",
            controller: "homeController"
        })
        .when("/helper", {
            templateUrl: "partials/helper.html",
            controller: "helperController"
        })
        .when("/insert", {
            templateUrl: "partials/insert.html"
        })
        .when("/randomizer", {
            templateUrl: "partials/randomizer.html"
        })
        .otherwise({
            templateUrl: "partials/ups.html"
        });
});


app.controller('tabController', function($scope) {...});

app.controller('homeController', function($scope) {...});

app.controller('helperController', function($scope) {...});

Its the first time I ask a question in SO, so please tell me if there is any important info missing, or the oppossite. Thanks!!

Answer 1

From my understanding, you are basically using nav-bar and changing routes accordingly. Calling it Tab would make it more confusing as TAB is something different from Navigation Bar. My suggestion:

1. Rename it to Navigation Controller
2. If you are using 1.5 and above, create a components as they are better approach for new versions of AngularJS 1.X
3. For the above code you have shared, you can check $location and accordingly apply active class to the selected div using ng-class. This will be the only solution as you need to apply active class to div which will be rendered as per the routing

Rest everything looks fine