bootstrap collapsible with angular js

Question

I am using bootstrap collapsible panel with angular js. my collapsible panel like as below

    <div class="container"><br/>
  <div class="form-group">
    <div class="checkbox">
      <label data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
        <input type="checkbox" ng-model="user.ch01"/>  checkbox 01
      </label>
    </div>
  </div>
  <div id="collapseOne" aria-expanded="false" class="collapse">
    <div class="well">Content 1</div>
  </div>
  <div class="form-group">
    <div class="checkbox">
      <label data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        <input type="checkbox" ng-model="user.ch02"/>  Checkbox 02
      </label>
    </div>
  </div>
  <div id="collapseTwo" aria-expanded="true" class="collapse in">
    <div class="well">Content 2</div>
  </div>
</div>
<button type="button" ng-click="resetPanel();"></button>

collapsible panel is working well. According to my requirement, when user checking all two checkboxes, content collapse. at that moment, i need to reset collapsible panel using reset button.

my function

$scope.resetPanel = function (){
$scope.user.ch01 = false;
$scope.user.ch02 = false;

} 

my reset function is working well, checkboxes reset (un-checked). But content divisions did not hide. its appear. How i solve this problem.

Answer 1

Make change this

<label data-toggle="collapse" data-target="#collapseOne" aria-expanded="{{user.ch01}}" aria-controls="collapseOne">
<label data-toggle="collapse" data-target="#collapseTwo" aria-expanded="{{user.ch02}}" aria-controls="collapseTwo">

before dirty the ng-models user.ch01 and user.ch02 , user object will be empty json or {}. So Your contions was nor working. After reset, it will have values {"ch01":false,"ch02":false} . So it was working