title: AngularJS - Use two different controllers?
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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:</p>
  
  <pre><code>&lt;nav class="navbar navbar-default" ng-controller="tabController"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;a class="navbar-brand" href="#/"&gt;Recetas Helper&lt;/a&gt;
          &lt;/div&gt;
          &lt;ul class="nav navbar-nav"&gt;
              &lt;li&gt;&lt;a href="#/"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li class="active"&gt;&lt;a href="#/helper"&gt;Helper&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#/insert"&gt;Insertar&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#/randomizer"&gt;Randomizer&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  &lt;div class="main-view" ng-view&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And here is my app.js code, where the controllers are and the route is checked:</p>
  
  <pre><code>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) {...});
  </code></pre>
  
  <p>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!!</p>