title: AngularJS bootstrap collapsed init
body: <p>I have the following html:</p>
  
  <pre><code>    &lt;div class="pull-right text-success m-t-sm"&gt;
      &lt;button class="btn btn-default" ng-init="isCollapsed = false" ng-click="isCollapsed = !isCollapsed" data-toggle="tooltip" data-placement="top" title="" data-original-title="Se kompetencer"&gt;&lt;i class="fa {{isCollapsed == true ? 'fa-arrow-down': 'fa-arrow-up';}}" ng-click=""&gt;&lt;/i&gt;&lt;/button&gt;
  &lt;/div&gt;
  
    &lt;div collapse="isCollapsed" class="panel-body collapse" style="height: 0px;"&gt;
          &lt;h4&gt;Kompetencer&lt;/h4&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>As you can see from this code i <code>ng-init</code> the <code>isCollapsed</code> variable to false.</p>
  
  <p>However when i run my page I get the following view:</p>
  
  <p><img src="https://i.stack.imgur.com/mDTjB.png" alt="enter image description here"></p>
  
  <p>As you  can see all of the boxes are visible? Can anyone tell me what might be going on here?</p>
  
  <p>Note - I am not overwriting a variable or anything.</p>
  
  <p>Maybe it has something to do with lazy load here is my config.router</p>
  
  <pre><code>    .state('app.competence', {
      url: '/Competence',
      templateUrl: 'tpl/app_competence.html',
      data: {
          authorizedRoles: [USER_ROLES.lb, USER_ROLES.superadmin, USER_ROLES.subadmin]
      },
  
      resolve: {
          deps: ['$ocLazyLoad',
              function ($ocLazyLoad) {
                  return $ocLazyLoad.load(['ngGrid']).then(
                      function () {
                          return $ocLazyLoad.load(['js/controllers/competence/CompetenceController.js','js/controllers/competence/CompetenceUserController.js', 'js/controllers/competence/CompetenceTableController.js', 'js/controllers/headerController.js']);
                      }
                  );
              }]
      }
  })
  </code></pre>
  
  <p>Html scope:</p>
  
  <pre><code>    &lt;tab ng-controller="CompetenceUserController as cuCtrl"&gt;
      &lt;tab-heading&gt;
          &lt;i class="icon-users text-md text-muted wrapper-sm"&gt;&lt;/i&gt;Brugere
      &lt;/tab-heading&gt;
      &lt;div class="wrapper-md"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-xs-12"&gt;
                  &lt;div class="panel no-body"&gt;
                      &lt;div class="panel-heading wrapper b-b b-light"&gt;
                          &lt;input class="form-control" ng-model="search.$" placeholder="Søg"&gt;
                          &lt;select class="form-control" ng-model="search.competence" ng-options="comp.name "&gt;&lt;/select&gt;
                      &lt;/div&gt;
                      &lt;ul class="list-group"&gt;
                          &lt;li class="list-group-item" ng-repeat="user in users | filter:search:strict"&gt;
                              &lt;div class="media"&gt;
                                  &lt;span class="pull-left thumb-sm"&gt;&lt;img
                                          src="{{user.image_path || 'img/AdamProfil.png'}}" alt="..."
                                          class="img-circle"&gt;&lt;/span&gt;
  
                                  &lt;div class="pull-right text-success m-t-sm"&gt;
                                      &lt;button class="btn btn-default" ng-init="init(false)"
                                              ng-click="isCollapsed = !isCollapsed" data-toggle="tooltip"
                                              data-placement="top" title=""
                                              data-original-title="Se kompetencer"&gt;&lt;i
                                              class="fa {{isCollapsed == true ? 'fa-arrow-down': 'fa-arrow-up';}}"
                                              ng-click=""&gt;&lt;/i&gt;&lt;/button&gt;
                                  &lt;/div&gt;
                                  &lt;div class="media-body"&gt;
                                      &lt;div&gt;&lt;a href=""&gt;{{user.profile.firstname +' '+user.profile.lastname ||
                                          user.username}}&lt;/a&gt;&lt;/div&gt;
                                      &lt;small class="text-muted"&gt;{{user.title.name}}&lt;/small&gt;
                                  &lt;/div&gt;
                                  &lt;div collapse="isCollapsed" class="panel-body collapse"
                                       style="margin-top: 10px;"&gt;
                                      &lt;h4 class="h4"&gt;Kompetencer&lt;/h4&gt;
  
                                      &lt;div class="table-responsive"&gt;
                                          &lt;table class="table table-striped b-t b-light"&gt;
                                              &lt;thead&gt;
                                                  &lt;th&gt;Kompetence Navn&lt;/th&gt;
                                                  &lt;th&gt;Niveau&lt;/th&gt;
                                              &lt;/thead&gt;
                                              &lt;tbody&gt;
                                                  &lt;tr ng-repeat="comp in user.user_has_competences"&gt;
                                                      &lt;td&gt;{{comp.competence.name}}&lt;/td&gt;
                                                      &lt;td&gt;{{comp.competence_level_id}}&lt;/td&gt;
                                                  &lt;/tr&gt;
                                              &lt;/tbody&gt;
                                          &lt;/table&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/tab&gt;
  </code></pre>
  
  <p>My controller:</p>
  
  <pre><code>    app.controller('CompetenceUserController', ['$http', '$scope', '$sessionStorage','competenceService', '$log', 'Session', 'api', function ($http, $scope, $sessionStorage, $log, Session, api, competenceService) {
      $scope.init = function(value) {
          $scope.isCollapsed = value;
      };
      $scope.competences = [];
      competenceService.getRawList().then(function(response)
      {
          $scope.competences = response;
      });
      $scope.users = [];
      $http.get(api.getUrl('userCompetence', null)).success(function (response) {
          $scope.users = response;
      });
  }]);
  </code></pre>