title: Conditionally include sidebar and header in Angular App
body: <p>On certain views I want a sidebar and header, and some I do not. Using AngularJS, what is the best approach to achieve this. </p>
  
  <p>My current solution in mind is to use ng-if on the sidebar and header DIV, and in my Controllers, set a $scope variable to be set to true or false depending on the views I want the sidebar and header to appear.</p>
  
  <p>A concrete example would be Youtube.com. On Youtube's homepage, notice there is a sidebar and a sub-header with the filters: "What to Watch" and "Music" in it. However, on any video page, the sidebar and sub-header doesn't exist. I want to achieve that in AngularJS.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>    &lt;html ng-app="demoApp"&gt;
  
      &lt;body ng-controller="demoAppMainController"&gt;
  
          &lt;header&gt;
              &lt;ng-include src="'./partials/mainHeader.html'"&gt;&lt;/ng-include&gt;
              &lt;ng-include ng-if="showSubHeader" src="'./partials/mainSubHeader.html'"&gt;&lt;/ng-include&gt;
          &lt;/header&gt;
  
          &lt;main&gt;
              &lt;ng-view&gt;&lt;/ng-view&gt;
          &lt;/main&gt;
  
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p><strong>discussionBoard.html</strong></p>
  
  <pre><code>    &lt;div class="discussionBoard" ng-controller="DiscussionBoardController"&gt;
           &lt;h2&gt;DiscussionBoard&lt;/h2&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>controllers.js</strong></p>
  
  <pre><code>    var demoAppControllers = angular.module('demoAppControllers', []);
  
      demoAppControllers.controller('demoAppMainController', ['$scope', function($scope) {
              $scope.showSubHeader = true;
      }]);
  
      opinionLensControllers.controller('DiscussionBoardController', ['$scope', function($scope) {
              $scope.showSubHeader = false;
      }]);
  </code></pre>