Mobile Navigation Show/Hide and redirect for Angular App

Question

I have an Angular app/site that I've built and running into issues with the mobile navigation.

The mobile navigation works but does not close once the page is redirected from the current page to the link clicked. Not sure how to make this close but getting stuck on it.

It feel like I should be watching for a change in the URL / hash to then close the navigation but not sure if that's the best way to go about this.

HTML

<header class="header" ng-class="{'header--active': isActive}">
        <div class="container">
            <div class="nav__bar" >
                <a href="#" class="nav__menu-trigger" ng-click="navToggle($event)" ng-class="{'nav__menu-trigger--active': isActive}">
                    <svg width="36px" height="23px" viewBox="0 0 36 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                            <g id="mobile-menu" sketch:type="MSLayerGroup" transform="translate(3.000000, 2.000000)" stroke="#FFFFFF" stroke-width="5" stroke-linecap="square">
                                <path d="M0.277777778,1.38888889 L29.7274632,1.38888889" id="Line" sketch:type="MSShapeGroup"></path>
                                <path d="M0.277777778,9.72222222 L29.7274632,9.72222222" id="Line-Copy" sketch:type="MSShapeGroup"></path>
                                <path d="M0.277777778,18.0555556 L29.7274632,18.0555556" id="Line-Copy-2" sketch:type="MSShapeGroup"></path>
                            </g>
                        </g>
                    </svg>
                </a>
                <a ng-href="#/"><img class="logo-small" src="images/retinad-logo-white.svg" alt=""></a>
            </div>
            <div class="nav__menu">
                <nav class="nav nav__header nav--left">
                    <ul class="nav-list">
                        <li><a ng-href="#/blog">Blog</a></li>
                        <li><a ng-href="#/docs">Docs</a></li>
                        <li><a ng-href="#/faq">Faq</a></li>
                        <li><a ng-href="#/advertisers">Advertisers</a></li>
                    </ul>
                </nav>
                <a ng-href="#/">
                  <img class="logo-large" src="images/retinad-logo-white.svg" alt="">
                </a>

                <nav class="nav nav__header nav--right">
                    <ul class="nav-list">
                        <li><a ng-href="#/sign-up">Sign Up</a></li>
                        <li><a ng-href="#/login">Log In</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

    <div ui-view></div>


    <div ng-view="">

    </div>

JS

'use strict';
angular.module( 'app.home', [
  'ui.router'
])

.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/');
  $stateProvider
    .state('main', {
        url: '/',
        templateUrl: 'views/main.html',
        controller: 'mainCtrl'
    });
})

.controller('mainCtrl', function ($scope) {
    $scope.title = 'Virtual reality is the first medium in human history that allows the broadcasting of experiences.';
    $scope.cta  = 'Get Started';
    $scope.ctaUrl = 'http://google.com';
    $scope.pressLinks = [
        {
            image: 'images/press-road-to-vr.png',
            alt: 'this is some alt text',
            url: 'http://google.com'
        },
        {
            image: 'images/press-lesaffaires.png',
            alt: 'this is some alt text',
            url: 'http://google.com'
        },
        {
            image: 'images/press-argent.png',
            alt: 'this is some alt text',
            url: 'http://google.com'
        }
    ];


})
.controller('scrollCtrl', ['$scope', '$location', '$anchorScroll',
    function ($scope, $location, $anchorScroll) {
        $scope.scrollTo = function(id) {
            $location.hash(id);
            $anchorScroll();
        };
}])
.controller('navCtrl', function ($scope, $location) {
    $scope.url = $location.path();
    $scope.isActive = false;
    $scope.navToggle = function($event) {
        $event.preventDefault();
        $scope.isActive = !$scope.isActive;

        console.log($scope.url, $location.path());  
    };
});

Answer 1

If the DOM isn't updating you can try:

 $timeout(function() {
   $scope.isActive = !$scope.isActive;
 },0);

Putting 0 at the end isn't the actual timeout that is used, your browser will default to a delay in ms, which I believe is 4ms.

This works because it forces an event onto the stack you can read more about it here