0

the image shows the login and signup pills the login functionality is being displayed but its not highlighted.

enter image description here

1 the bootstrap pills that I added are not staying active once a pill is clicked the content is getting displayed and data toggle is also functioning but for both the contents only Login pill is remaining active.

    <div class="container" ng-controller="LoginController as vm" ng-init="vm.init()">
            <ul class="nav nav-pills">
                <li role="presentation" class="active">
                    <a  data-toggle="pill" href="#pills-login">Login</a>
                </li>
                <li>
                    <a data-toggle="pill" href="#pills-signup">Sign-up</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane fade in active" id="pills-login">
        </div>
        <div class="tab-pane fade" id="pills-signup">
        </div>
        </div>
        </div>

included cdns and scripts:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Chathurya Lahari
  • 1
  • 2
  • What do you mean by not staying active? Please replicate the problem in the fiddle. – Dhaval Jardosh Dec 20 '17 at 15:14
  • This doesn't make any sense. Please see https://stackoverflow.com/help/mcve and https://stackoverflow.com/help/how-to-ask and repose your question. – Brian Dec 20 '17 at 16:45
  • I edited the question so it makes a bit more sense now (the formatting was not showing the majority of the question due to parsing). Could still use more information (angular version, router, etc). – Brian Dec 20 '17 at 16:50
  • Thanks Brian. Angular version: 1.6 – Chathurya Lahari Dec 20 '17 at 16:55
  • From what you have, the `class="active"` needs to be on the `
  • ` element, not the link. But that said, I am wondering if you are trying to do this dynamically? So `
    • – Brian Dec 20 '17 at 16:55
  • yes I am sorry about that yes the class should be on
  • so initially the Login pill is active and onclick of Signup the content of signup is getting displayed but the Login pill is active instead of Signup. How do I change that?
    • – Chathurya Lahari Dec 20 '17 at 17:10
  • Are you using a router? Normally your header bits would be defined at a higher level of the app than within an individual controller. I would start looking at this: https://stackoverflow.com/questions/16199418/how-to-set-bootstrap-navbar-active-class-with-angular-js – Brian Dec 20 '17 at 18:12