<div>
    <button class="button"  ng:click="selectLibraries()">{{$resource('documents.select..')}}</button>
    <ul>
        <li ng:repeat="select in selected">{{select}}</li>
    </ul>
    <div qn:dialog="ui.dialogSelect" style="padding: 0">
        <div class="toolbar cfix">
            <div class="toolbar-group">
                <h3>{{$resource('documents.select_libraries')}}</h3>
            </div>
        </div>
        <div style="height: 400px; overflow: auto;">
            <li class="search-box"><input ng:model="searchLibraries" type="text" placeholder="Search libraries" /><i ng:show="searchLibraries.length > 0" ng:click="searchLibraries = ''" class="icon-remove clickabile"></i></li>
            <ul qn:selector="options" ng:model="libraries">
                <li ng:repeat="library in libraries | filter : searchLibraries" class="ui-state-default" style="padding: 5px" >
                    {{library.Title}}
                </li>
                <li style="clear: both">
                    <button ng:click="loadMore()" ng:show="canLoadMore == true">{{$resource('documents.more')}}</button>
                </li>
            </ul>
        </div>  
        <div style="margin-top: 15px">
            <button class="button lightblue" ng:click="doneSelection()"><i class="icon-ok"></i> {{$resource('documents.save')}}</button> or <button class="button" ng:click="cancelSeletion()">{{$resource('documents.cancel')}}</button>
        </div>
    </div>
</div>