index.html

<div ng-cloak ng-hide="!rootModels.topicModel || state.name !== 'articles'">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 hidden-md hidden-lg">
        <div class="text-center">
          <pagination total="articlesTotal" page="articlesIndexModels.page" limit="articlesIndexModels.limit" />
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-9 col-sm-12">
        <div class="panel panel-default">
          <div class="panel-heading clearfix">
            Found
            <ng-pluralize count="articlesTotal||0" when="{0:'no articles',1:'1 article',other:'{} articles'}"></ng-pluralize> in the database.
            <div class="pull-right">
              Page <span ng-bind="wordsIndexModels.page||1"></span> of <span ng-bind="maxPage||1"></span>
            </div>
          </div>
          <table class="table table-hover table-condensed table-fixed">
            <tbody>
              <tr ng-repeat="article in articles">
                <td>
                  <article-link article="::article"/>
                </td>
              </tr>
              <tr ng-show="loadingArticles">
                <td>Loading...</td>
              </tr>
              <tr ng-show="!loadingArticles&&!articles.length">
                <td>No Articles</td>
              </tr>
            </tbody>
          </table>
          <div class="panel-footer clearfix">
            <div class="pull-right">
              Page <span ng-bind="wordsIndexModels.page||1"></span> of <span ng-bind="maxPage||1"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-3 hidden-sm">
        <div class="sidebar-affix">
          <div>
            <div class="form-group">
              <pagination-full total="articlesTotal" page="articlesIndexModels.page" limit="articlesIndexModels.limit" />
            </div>
            <hr>
            <div class="form-group">
              <div class="btn-group btn-group-justified">
                <input type="text" class="form-control" ng-model="articlesIndexModels.contains" placeholder="Filter..." ng-model-options="{debounce:300}">
                <span class="glyphicon glyphicon-remove-circle searchclear" ng-click="articlesIndexModels.contains=''" analytics-on analytics-event="Entities Filter (clear)" analytics-category="Filter actions"></span>
              </div>
            </div>
            <div class="form-group">
              <label for="initial">Initial letter</label>
              <char-selector id="initial" ng-model="articlesIndexModels.startChar"/>
            </div>
            <div class="form-group">
              <label>Sort by</label>
              <div class="input-group">
                <select class="form-control" ng-model="articlesIndexModels.sortkey">
                  <option value="title">Title</option>
                  <option value="date">Date</option>
                  <option value="created">Added</option>
                  <option value="topicsCount"># of topics</option>
                </select>
                <span class="input-group-btn">
                  <sort-dir ng-model="articlesIndexModels.sortdir" />
                </span>
              </div>
            </div>
            <div class="form-group">
              <label>From/to date</label>
              <div class="input-group date" id="fromDate" bs-datetimepicker ng-model="articlesIndexModels.fromDate">
                <input type="text" class="form-control" placeholder="From date">
                <span class="input-group-addon">
                  <span class="glyphicon glyphicon-calendar"></span>
                </span>
              </div>
              <div class="input-group date" id="toDate" bs-datetimepicker ng-model="articlesIndexModels.toDate">
                <input type="text" class="form-control" placeholder="To date">
                <span class="input-group-addon">
                  <span class="glyphicon glyphicon-calendar"></span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div ng-cloak ui-view></div>