unserver-unify/src/app/departments/detail.html

<div class="col-lg-12" ng-controller="DepartmentDetailCtrl as ctrl">
  <div class="tag-box padding_reduce padding_reduce2 clearfix">
    <a class="btn btn-info pull-right" ng-if="ctrl.item.key" href="//{{ ctrl.item.key+'.'+ctrl.hosturl}}"  translate>Enter</a>
    <strong>
      {{ ctrl.item.name }}
    </strong>
    <ul class="list-unstyled list-inline blog-info margin-bottom-10 info_sml">
      <li title="{{'Author'|translate}}">
        <i class="fa fa-eye"></i> {{ctrl.item.visitercounter||1}}
      </li>
    </ul>
    <div class="row">
      <div class="col-md-4">
        <img ng-src="{{ctrl.imageUrl}}" style="margin-bottom: 10px;" title="{{ ctrl.item.name }}" width="100%"/>
      </div>
      <div class="col-md-8">
        <p class="special_note" id="description">
          {{ ctrl.item.description }}
        </p>
        <div class="tag-box tag-box-v2">
          <div ng-bind-html="ctrl.item.detail">
          </div>
        </div>
        <div class="fixed_container">
          <audio autoplay="" controls="" ng-if="ctrl.item.audio" ng-src="{{ ctrl.item.audiourl }}" style="width:90%">
          </audio>
        </div>
      </div>
    </div>
  </div>
  <div class="tag-box padding_reduce padding_reduce2 clearfix">
    <div class="row">
      <div class="margin-bottom-10 clearfix blog-info col-lg-12">
        <strong translate>
          Address
        </strong>
      </div>
      <div class="col-lg-3">
        <ul class="list-unstyled who margin-bottom-30">
          <li ng-if="ctrl.item.address">
            <i class="fa fa-home">
            </i>
            <div>
              {{ ctrl.item.address }}
            </div>
          </li>
          <li ng-if="ctrl.item.postcode">
            <i class="fa fa-map-marker">
            </i>
            <div>
              {{ ctrl.item.postcode }}
            </div>
          </li>
          <li ng-if="ctrl.item.email">
            <a href="mailto:{{ ctrl.item.email }}" target="_top">
              <i class="fa fa-envelope">
              </i>
              <div>
                {{ ctrl.item.email }}
              </div>
            </a>
          </li>
          <li ng-if="ctrl.item.tel">
            <i class="fa fa-phone">
            </i>
            <div>
              {{ ctrl.item.tel }}
            </div>
          </li>
          <li ng-if="ctrl.item.url">
            <a href="http://{{ ctrl.item.url }}" target="_blanck">
              <i class="fa fa-globe">
              </i>
              <div>
                {{ ctrl.item.url }}
              </div>
            </a>
          </li>
          <li ng-if="ctrl.item.facebook">
            <a href="http://{{ ctrl.item.facebook }}" target="_blanck">
              <i class="fa fa-facebook">
              </i>
              <div>
                {{ ctrl.item.facebook }}
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="col-lg-9">
        <div map-lazy-load="https://maps.google.com/maps/api/js?key=AIzaSyCDpjAui7Bp-lfs3akUG4zGId3RAyhGA1M" ng-if="ctrl.item.lat">
        <ng-map center="{{ctrl.item.lat}},{{ctrl.item.lng}}" zoom="12">
          <shape center="{{ctrl.item.lat}},{{ctrl.item.lng}}" fill-color="#FF0000" fill-opacity="0.55" name="circle" no-watcher="true" radius="400" stroke-color="#00FF00" stroke-opacity="0.8" stroke-weight="2">
            </shape>
        </ng-map>
      </div>
      </div>
    </div>
  </div>
</div>