Javascript ng-href无法在ng-repeat中工作

Question

I have an accordion wich is opening when I click on it . Everything is working just fine when I don't use ng-repeat , but once I use it , it will not go to my href adress , and will go to /home. Here is my HTML code:

   <div class="accordion" ng-repeat="department in allDepartments">
    <div class="accordion-section">
        <a class="accordion-section-title" ng-href="#{{department.name}}"  >{{department.name}} </a>

        <div ng-attr-id="{{department.name}}" class="accordion-section-content" target="_self">
            <p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
        </div><!--end .accordion-section-content-->
    </div><!--end .accordion-section-->
</div><!--end .accordion-->

And here is my JS code :

$(document).ready(function() {
        function close_accordion_section() {
            $('.accordion .accordion-section-title').removeClass('active');
            $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
        }

        $('.accordion-section-title').click(function(e) {
            // Grab current anchor value
            var currentAttrValue = $(this).attr('href');

            if($(e.target).is('.active')) {
                close_accordion_section();
            }else {
                close_accordion_section();

                // Add active class to section title
                $(this).addClass('active');
                // Open up the hidden content panel
                $('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
            }

            e.preventDefault();
        });
    });

And finally my css code :

/*----- Accordion -----*/
.accordion, .accordion * {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

.accordion {
overflow:hidden;
box-shadow:0px 1px 3px rgba(0,0,0,0.25);
border-radius:3px;
background:#f7f7f7;
}

/*----- Section Titles -----*/
.accordion-section-title {
width:100%;
padding:15px;
display:inline-block;
border-bottom:1px solid #1a1a1a;
background:#333;
transition:all linear 0.15s;
/* Type */
font-size:1.200em;
text-shadow:0px 1px 0px #1a1a1a;
color:#fff;
}

.accordion-section-title.active, .accordion-section-title:hover {
background:#4c4c4c;
/* Type */
text-decoration:none;
}

.accordion-section:last-child .accordion-section-title {
border-bottom:none;
}

/*----- Section Content -----*/
.accordion-section-content {
padding:15px;
display:none;
}

Answer 1

You are mixing jQuery and AngularJs (Bad pratice)... However in AngularJs the hash character ('#') is used to change view (yoursite/#/view1) while in pure html it's used to forward the page in the point where there's the id (yoursite/#id)

this is why your browser redirect you on your homepage