services.html

<div id="headerPanelService" class="col-md-12">
	<h1>{{'Health Services' | translate}}</h1>
	<p>{{'Number of Services' | translate}}: {{services.dataElements.length}}</p>							
	<p>{{'Number of DataSets in Service' | translate}}: {{serviceDataSets.dataSets.length}}</p>
	<p>{{'Number of IndicatorGroups in Service' | translate}}: {{indicatorGroups.indicatorGroups.length}}</p>
	<div class="col-md-12">
	<select class="col-md-2" ng-options="service.displayDescription for service in services.dataElements | orderBy: 'displayName'" name="selectService" id="drpBoxServices" ng-model="selectedService"
	ng-change="getServiceData()">
	</select>
	</div>

	<h1 class="col-md-12">{{selectedService.displayDescription}}</h1>
	
	<div id="DossierTextContainer"  class="col-md-12">
		<span ng-bind-html="dossier.rows[0][0]"></span>
	</div>
	<div id="tocContainer" class="col-md-11">
		<h3 ng-show="selectedService" style="text-decoration: underline;">{{'Table Of Content'| translate}}</h3>
		<ul  ng-repeat="i in toc.entries | orderBy:'parent.displayName'">
    		<li ><a href="#{{i.parent.id}}">{{i.parent.displayName}}</a>
				<ul  ng-repeat="j in i.children">
					<li ><a href="#{{j.id}}">{{j.displayName}}<!-- <span  class="badge">{{j.dataElements.length}}</span> --></a></li>
				</ul>
			</li>
		</ul>
	</div>
	<div id="serviceDataSetContainer" class="col-md-12" ng-repeat="serviceDataSet in serviceDataSets.dataSets" ng-model="serviceDataSet"> 
		<h2 id="{{serviceDataSet.id}}">{{serviceDataSet.displayName}}</h2>
		<div id="sectionContainer" ng-controller="SectionController" ng-init="getSections(serviceDataSet)">	
			
			<div  class="col-md-12" ng-repeat="section in sections.sections | orderBy: 'displayName'">
				<h3 id="{{section.id}}">{{section.displayName}}</h3>
				<p>{{'Number of elements in section'| translate}}: {{section.dataElements.length}}</p>
				<table  ng-controller="ElementsTableController" ng-init="getElementsInSection(section)" class="sectionElementsTable table table-striped">
					<thead>
						<tr >
							<th>{{'NameElement'| translate}}</th>
							<th>{{'FormNameElement'| translate}}</th> 
							<th>{{'DescriptionElement'| translate}}</th>
						</tr>
					</thead>
					<tbody> 
						<tr ng-repeat="dataElement in dataElements.dataElements | orderBy: 'displayName'">
							<td>{{dataElement.displayName}}</td>
							<td>{{dataElement.displayFormName}}</td>
							<td>{{dataElement.displayDescription}}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	<div class="col-md-12" id="IndicatorGroupsContainer" ng-repeat="indicatorGroup in indicatorGroups.indicatorGroups | orderBy: 'displayName'">
		<h3>{{'Indicator Group' | translate}}: {{indicatorGroup.displayName}}</h3>
		<div id="IndicatorGroup" ng-controller="IndicatorController" ng-init="getIndicators(indicatorGroup.id)" ng-model="indicatorGroup" class="col-md-12">
			<p>{{'Number of indicators in group' | translate}}: {{indicatorGroup.indicators.length}}</p>
			<table   class="indicatorTable table table-striped">
				<thead>
					<tr >
						<th>{{'Nameindicator' | translate}}</th>
						<th>{{'DescriptionIndicator' | translate}}</th>
						<th>{{'NumeratorIndicator' | translate}}</th>
						<th>{{'DenominatorIndicator' | translate}}</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="indicator in  indicatorGroup.indicators | orderBy: 'displayName'">
						<td>{{indicator.displayName}}</td>
						<td>{{getDescription(indicator)}}</td>
						<td>{{getNuminator(indicator)}}</td>
						<td>{{getDenominator(indicator)}}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>