title: Hide navigation bar with angularjs using ng-if
body: <p><strong>SOLVED</strong></p>
  
  <p>Good Evening,</p>
  
  <p>I'm having trouble with hiding navigation sidebar using ng-if from angular. I declare the activetab on $route but it still didn't work. Here's the code.</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;header ng-if="$route.current.activetab !== 'login'"&gt;
  &lt;div class="col s3"&gt;
      &lt;ul id="nav-mobile" class="side-nav fixed"&gt;
          &lt;li class="logo"&gt;
              &lt;a href="#" id="logo-container" class="brand-logo"&gt;BRAND LOGO&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;Test&lt;/li&gt;
          &lt;li&gt;Test&lt;/li&gt;
          &lt;li&gt;Test&lt;/li&gt;
          &lt;li&gt;Test&lt;/li&gt;
          &lt;li&gt;Test&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>$route config on app.js:</p>
  
  <pre><code>experimentApp.config(['$routeProvider', '$locationProvider', '$httpProvider',
  function($routeProvider, $locationProvider, $httpProvider) {
      var baseTitle = 'Experiment';
  
      $routeProvider.when('/', {
          title: baseTitle + ' - Home',
          templateUrl: 'partials/home.php',
          activetab: 'home'
      }).when('/login', {
          title: baseTitle + ' - Login',
          templateUrl: 'partials/login.php',
          activetab: 'login',
          controller: 'LoginController'
      });
  
  }]);
  </code></pre>
  
  <p><strong>Answer</strong>:</p>
  
  <p>i created new controller named navigation, partitioning the html and put some code on root controller.</p>
  
  <p>Navigation Controller:</p>
  
  <pre><code>experimentApp.controller('navigation',
  ['$scope', '$location', '$route', function($scope, $location, $route) {
      $scope.navigation = function() {
          if (!$scope.active('/login')) {
              return 'partials/navigation.php';
          }
      }
  }]);
  </code></pre>
  
  <p>$scope.active on root controller:</p>
  
  <pre><code>$scope.active = function(path) {
          return $location.path().match(new RegExp(path + '.*', 'i')) != null;
      }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;header ng-controller="navigation" ng-include="navigation()"&gt;&lt;/header&gt;
  </code></pre>
  
  <p>Thanks to anyone who helped.</p>