Reviewing the code provided:

<div class="pull-right text-success m-t-sm">
    <button class="btn btn-default" ng-init="isCollapsed = false" ng-click="isCollapsed = !isCollapsed" data-toggle="tooltip" data-placement="top" title="" data-original-title="See competencies"><i class="fa {{isCollapsed == true ? 'fa-arrow-down': 'fa-arrow-up';}}" ng-click=""></i></button>
</div>

  <div collapse="isCollapsed" class="panel-body collapse" style="height: 0px;">
        <h4>Competencies</h4>

    </div>

The code snippet initializes the variable isCollapsed to false using the ng-init directive.

However, upon running the page, all the boxes appear visible. Any thoughts on the reason for this behavior?

Please note that there is no variable overwriting occurring.

Could lazy loading be a factor? Here's the content of my config.router:

.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']);
                    }
                );
            }]
    }
})

HTML scope:

<tab ng-controller="CompetenceUserController as cuCtrl">
    <tab-heading>
        <i class="icon-users text-md text-muted wrapper-sm"></i>Users
    </tab-heading>
    <div class="wrapper-md">
        <div class="row">
            <div class="col-xs-12">
                <div class="panel no-body">
                    <div class="panel-heading wrapper b-b b-light">
                        <input class="form-control" ng-model="search.$" placeholder="Search">
                        <select class="form-control" ng-model="search.competence" ng-options="comp.name "></select>
                    </div>
                    <ul class="list-group">
                        <li class="list-group-item" ng-repeat="user in users | filter:search:strict">
                            <div class="media">
                                <span class="pull-left thumb-sm"><img src="{{user.image_path || 'img/AdamProfil.png'}}" alt="..." class="img-circle"></span>

                                <div class="pull-right text-success m-t-sm">
                                    <button class="btn btn-default" ng-init="init(false)" ng-click="isCollapsed = !isCollapsed" data-toggle="tooltip" data-placement="top" title="" data-original-title="See competencies"><i class="fa {{isCollapsed == true ? 'fa-arrow-down': 'fa-arrow-up';}}" ng-click=""></i></button>
                                </div>
                                <div class="media-body">
                                    <div><a href="">{{user.profile.fullname || user.username}}</a></div>
                                    <small class="text-muted">{{user.title.name}}</small>
                                </div>
                                <div collapse="isCollapsed" class="panel-body collapse" style="margin-top: 10px;">
                                    <h4 class="h4">Competencies</h4>

                                    <div class="table-responsive">
                                        <table class="table table-striped b-t b-light">
                                            <thead>
                                                <th>Competency Name</th>
                                                <th>Level</th>
                                            </thead>
                                            <tbody>
                                                <tr ng-repeat="comp in user.user_competencies">
                                                    <td>{{comp.competency.name}}</td>
                                                    <td>{{comp.competency_level_id}}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</tab>

My controller:

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.competencies = [];
    competenceService.getRawList().then(function(response)
    {
        $scope.competencies = response;
    });
    $scope.users = [];
    $http.get(api.getUrl('userCompetence', null)).success(function (response) {
        $scope.users = response;
    });
}]);