preview.html

<div class="preview-wrapper">
  <div class="dirty-message" ng-if="isDirty">
    This preview is out of date. Please <a ng-click="loadLatest()">reload</a> to see the latest.
  </div>

  <ng-include
    src="'templates/error-presenter.html'"
    ng-controller="ErrorPresenterCtrl"
    ng-if="errors.length || warnings.length">
  </ng-include>

  <ng-include src="'templates/specs-info.html'"></ng-include>

  <ng-include
    src="'templates/security.html'"
    ng-if="specs.securityDefinitions">
  </ng-include>

  <ng-include src="'templates/tags.html'"></ng-include>

  <header>
    <h3 class="section-header">
      <a ng-click="
          specs.paths.$folded = !specs.paths.$folded;
          foldEditor(['paths'], specs.paths.$folded);">

          <span>Paths</span>
      </a>

      <span class="on-hover">
        <a ng-click="listAllOperation()">List all operations</a>
      </span>
    </h3>
  </header>

  <ul class="paths" collapse-when="specs.paths.$folded">
    <li
      class="path"
      ng-include
      src="'templates/path.html'"
      ng-repeat="(pathName, path) in specs.paths"
      ng-if="showPath(path, pathName)">
    </li>
  </ul>

  <header ng-if="specs.definitions">
    <h3 class="section-header">
      <a ng-click="
        specs.definitions.$folded = !specs.definitions.$folded;
        foldEditor(['definitions'], specs.definitions.$folded);
      ">Models</a>
      <span class="on-hover">
        <a ng-click="listAllDefnitions()">List all models</a>
      </span>
    </h3>
  </header>

   <ul
     class="section-content definitions"
     ng-if="showDefinitions(specs.definitions)"
     collapse-when="specs.definitions.$folded"
     class="models">

      <li
        class="definition"
        ng-repeat="(modelName, model) in specs.definitions"
        ng-if="!isVendorExtension(modelName)"
        scroll-into-view-when="isInFocus(['definitions', modelName])">
        <h4>
          <a
            ng-click="
              model.$folded = !model.$folded;
              foldEditor(['definitions', modelName], model.$folded)
            "
            class="definition-title">
            {{modelName}}
          </a>
          <a
            class="jump-to-yaml"
            ng-click="focusEdit($event, ['definitions', modelName])"
            tooltip-placement="left"
            uib-tooltip="Jump to YAML"
            tooltip-trigger="mouseenter">
          </a>
        </h4>
        <div collapse-when="model.$folded">
          <schema-model schema="model"></schema-model>
        </div>
      </li>
    </ul>
</div>