title: Angularjs - separating global search and page contents?
body: <p>My simple angular app has three pages so far; each page has its own controller that handles various interactions with the user and backend system. I want to add in a div header that contains a searchbar, much like the one you see at the top on every page on StackOverflow!.</p>
  
  <p>The problem is in separating controller logic between the searchbar and the page content. I feel they should be put in separate controllers so that the code can be modularized. The Search controller will handle interactions with the searchbar across all pages as well as displaying the search results page, while the page content controllers will handle logic for their specific page content.</p>
  
  <p>My current setup is (snippets):</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>function appRouteConfig($stateProvider, $urlRouteProvider) {
      $stateProvider
      .state("landingpage", {
          url: '/',
          controller: "LandingPageCtrl",
          templateUrl: "views/html/landing.html"
      })
      .state("discussion", {
          url: '/discussion',
          controller: "DiscussionCtrl",
          templateUrl: "views/html/discussion.html"
      })
      .state("search_content", {
          url: "/search_results",
          controller: "SearchCtrl",
          templateUrl: "views/html/searchpage.html"
      })
  }
  </code></pre>
  
  <p><strong>controller.js</strong></p>
  
  <pre><code>controllers.controller("SearchCtrl", ["$scope", "$location", 
      function($scope, $location) {
         $scope.search = function(query) {
             // Query backend server and redirect to /search_results with response.
         }
      }
  ]);
  </code></pre>
  
  <p><strong>discussion.html</strong></p>
  
  <pre><code>&lt;div data-ng-include=" 'views/html/searchNav.html ' "&gt;&lt;/div&gt;
  
  &lt;div class="discussion"&gt;
      &lt;!-- Discussion html --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But the problem here is that I have already declared a controller for each route in app.js. So when I visit <code>/discussion</code>, the controller that will be loaded will be <code>DiscussionCtrl</code>, and the search controller will not be loaded so search won't work.</p>
  
  <p>I could remove all the controllers specified in the routes, and set them manually, something along the lines of:</p>
  
  <pre><code>&lt;div ng-controller="SearchCtrl"&gt;
      ....
  &lt;/div&gt;
  
  &lt;div ng-controller="DiscussionCtrl"&gt;
      ....
  &lt;/div&gt;
  </code></pre>
  
  <p>That way both my controllers will be loaded, but this seems like a pain to manually specify it across all my pages. It certainly doesn't seem to scale well if I were to add in 20+ new pages in the future (doesn't scale up) and is annoying if multiple different routes use the same controller.</p>
  
  <p>Another solution could be that I have a <code>doSearchSubmit()</code> in each of my controllers, but then it'll be duplicate code across all controllers since the search code is the same (just query backend server and redirect to search results page), which is not good.</p>
  
  <p>How should I properly integrate a search nav bar in Angular?</p>