Невозможно нажать на тег <a>при первом нажатии, используя angular & bootstrap 3.3.7

Question

Здесь моя проблема в том, что я не могу щелкнуть теги в первый клик / первый раз, когда он мигает, и во второй клик, а затем выполняет свое действие.

<div class="container">

    <a href="#" class="navbar-brand"></a>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">

        <ul class="nav navbar-nav navbar-right landing-nav-text ul-right">
            <li class="active"><a href="#about">About <span class="sr-only">(current)</span></a></li>
            <li><a href="#features">Features</a></li>
            <li><a href="#info">info</a></li>


        </ul>
    </div>
</div>

Ниже мой CSS.

.navbar>li {
    display: inline-block;
    list-style: none;
}

.navbar-nav>li>a {

    color: #788791;
    display: inline-block;
    padding: 0 15px 3px 15px;
    text-decoration: none;
    background-color: white !important;
}

.navbar-nav>li>a:hover {

    font-size: 14px;
    color: #788791;
    border-bottom: solid 4px #0f8287;
    margin-bottom: -3px;

}


.navbar-brand {
    padding-top: 0px !important;
    padding-bottom: 0 !important;
    height: 20px;
}

.navbar {
    height: 20px !important;
    padding-top: 0px !important;
    padding-bottom: 0 !important;
}

.navbar-toggle {
    padding: 0 0;
    margin-top: 7px;
    margin-bottom: 0;
}

Ниже приведен мой элемент проверки.

Итак, при первом щелчке он щелкает, а при втором щелчке я могу выполнить действие.что могло вызвать проблему?