<div id="chat-container" ng-class="{open: open}">
    <span class="chat-list-open-close" ng-click="openToggle()"><i class="fa fa-user"></i><b>!</b></span>

    <div class="chat-list-body custom-scroll">
        <ul id="chat-users">
            <li ng-repeat="chatUser in chatUsers | filter: chatUserFilter">
                <a ng-click="messageTo(chatUser)"><img ng-src="{{chatUser.picture}}">{{chatUser.username}} <span
                        class="badge badge-inverse">{{chatUser.username.length}}</span><span class="state"><i
                        class="fa fa-circle txt-color-green pull-right"></i></span></a>
            </li>
        </ul>
    </div>
    <div class="chat-list-footer">
        <div class="control-group">
            <form class="smart-form">
                <section>
                    <label class="input" >
                        <input type="text" ng-model="chatUserFilter" id="filter-chat-list" placeholder="Filter">
                    </label>
                </section>
            </form>
        </div>
    </div>
</div>