ng-repeat with boootstrap toggle strange behavior - angularjs

Question

below is my code
<div class='loadMainDiv' ng-controller="loadCntrl">
<ul class='list-header' data-toggle="collapse" data-target='#{{schema.name}}' ng-repeat='schema in data'> {{schema.name}}
<!-- <li data-toggle="collapse" data-target='#{{schema.name}}'>{{schema.name}}
</li> -->
<div id='{{schema.name}}' class="collapse in ">
<ul ng-repeat="schemaEle in schema.value">
<li class='list-item' ng-click='setSelected(schemaEle.name,$index)'><span ng-class="(selectedEle==schemaEle.name) ? 'selectedLi' :''">{{schemaEle.name+""}}</span></li>
</ul>
</div>
</ul>
</div>
this is output i am getting
Fruit
Mango
Banana
Language
English
Spanish
the behavior i am looking for is when i click on Fruit the DIV should be shrink and if click again it should expand. This is happening correctly but even if i click on individual sublist element i am getting same behaviour.
look strange for me ? what could be the reason

Answer 1

<div ng-repeat='schema in data'>
<div class='list-header' data-toggle="collapse" data-target='#{{schema.name}}'>
{{schema.name}}
</div>
<div id='{{schema.name}}' class="collapse in ">
<ul ng-repeat="schemaEle in schema.value">
<li class='list-item' ng-click='setSelected(schemaEle.name,$index); event.preventDefault();'><span ng-class="(selectedEle==schemaEle.name) ? 'selectedLi' :''">{{schemaEle.name+""}}</span></li>
</ul>
</div>
</div>