AngularJS ui-sref not working in navbar dropdown Bootstrap on mobile - angularjs

Question

Using UI-Router for Angular and Bootstrap for a navbar I'm trying to turn anchor inside dropdown clickable on but isn't working on mobile. I saw ui-sref not working in bootstrap dropdown and the solution is not working for me. I'm not getting any error on console.
HTML:
<div class="container">
<a class="mainnav-toggle is-open" data-toggle="collapse" data-target=".mainnav-collapse">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars"></i>
</a>
<nav class="mainnav-collapse collapse" role="navigation" aria-expanded="false" style="height: 0px;">
<ul class="mainnav-menu">
<li class="dropdown">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
Links<i class="mainnav-caret"></i>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a ui-sref="auth.add()">
<i class="fa fa-users dropdown-icon" aria-hidden="true"></i>
Link 1
</a>
</li>
<li>
<a ui-sref="auth.list()">
<i class="fa fa-history dropdown-icon" aria-hidden="true"></i>
Link 2
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
Reference Order:
<script src="bower_components/jquery.slimscroll/jquery.slimscroll.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="bower_components/bootstrap-datepicker/dist/locales/bootstrap-datepicker.pt-BR.min.js"></script>
<script src="bower_components/select2/dist/js/select2.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-loading-bar/src/loading-bar.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script src="bower_components/angular-messages/angular-messages.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/angular-bootstrap-toggle/dist/angular-bootstrap-toggle.min.js"></script>
<script src="dist/app.min.js"></script>
JS: the UI-Router config:
var app = angular.module('accountsMod');
app.config(function routeConfig ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/login");
$stateProvider
.state('auth.add', {
url: '/accounts/add',
controller: 'AccountController',
templateUrl: 'app/components/account/add.html'
})
.state('auth.list', {
url: '/accounts/add',
controller: 'AccountController',
templateUrl: 'app/components/account/list.html'
})
}
The problem focus is: when I touch on these anchors in navbar collapsed according to responsive design provided by bootstrap on mobile phone, then menu closes and nothing happening.

Answer 1

One solution: I had to install 'angular-ui-bootstrap' package and did some changes as follow:
Referencing to directive:
var app = angular.module('accountsMod',['ui.router', 'ui.bootstrap']);
Replacing each html tag for toggle menu as follow (about old in comment):
HTML:
`
Toggle navigation
<nav class="mainnav-collapse collapse" role="navigation" aria-expanded="false" style="height: 0px;">
<ul class="mainnav-menu">
<li uib-dropdown> <!--OLD: <li class="dropdown">-->
<a uib-dropdown-toggle> <!--OLD:<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">-->
Links<i class="mainnav-caret"></i>
</a>
<ul uib-dropdown-menu><!--OLD: <ul class="dropdown-menu" role="menu">-->
<li>
<a ui-sref="auth.add()">
<i class="fa fa-users dropdown-icon" aria-hidden="true"></i>
Link 1
</a>
</li>
<li>
<a ui-sref="auth.list()">
<i class="fa fa-history dropdown-icon" aria-hidden="true"></i>
Link 2
</a>
</li>
</ul>
</li>
</ul>
</nav>
`
So the UI-SREF links started working in mobile navigation!! Tks!