D-Net

				      			<ul class="nav nav-tabs">

  									<li class="active"><a href="#accordionTerm{{\$index}}_synonyms" data-toggle="tab">Synonyms</a></li>

  									<li><a href="#accordionTerm{{\$index}}_rels" data-toggle="tab">Relations</a></li>

  								</ul>

			      				<div class="tab-content" style="margin-top:10px;">

  									<div class="tab-pane active" id="accordionTerm{{\$index}}_synonyms">

										<p class="text-muted" ng-hide="term.synonyms">No synonyms</p>

										<table class="table table-bordered table-striped" ng-show="term.synonyms">

											<th>Synonym</th>

											<th>Encoding</th>

											<th>Operation</th>

											<tr ng-repeat="synonym in term.synonyms">

												<td class="col-md-8">{{synonym.term}}</td>

												<td class="col-md-4">{{synonym.encoding}}</td>

												<td class="col-md-1">

													<button type="button" class="btn btn-xs btn-primary" ng-click="showSynonymModal(term, synonym)">

														<span class="glyphicon glyphicon-pencil"></span>

													</button>

													<button type="button" class="btn btn-xs btn-danger" ng-click="deleteSynonym(term, synonym)">

														<span class="glyphicon glyphicon-trash"></span>

													</button>

												</td>

											</tr>

										</table>

										<button class="btn btn-xs btn-primary" type="button" ng-click="showSynonymModal(term, null)">

											<span class="glyphicon glyphicon-plus"></span>

										</button>

									</div>

									<div class="tab-pane" id="accordionTerm{{\$index}}_rels">

										<p class="text-muted" ng-hide="term.relations">No relations</p>

										<table class="table table-bordered table-striped" ng-show="term.relations">

											<th>Related Term</th>

											<th>Relation Type</th>

											<th>Operation</th>

											<tr ng-repeat="rel in term.relations">

												<td class="col-md-8">{{rel.value}}</td>

												<td class="col-md-4">{{rel.type}}</td>

												<td class="col-md-1">

													<button type="button" class="btn btn-xs btn-primary" ng-click="showRelModal(term, rel)">

														<span class="glyphicon glyphicon-pencil"></span>

													</button>

													<button type="button" class="btn btn-xs btn-danger" ng-click="deleteRel(term, rel)">

														<span class="glyphicon glyphicon-trash"></span>

													</button>

												</td>

											</tr>

										</table>

										<button class="btn btn-xs btn-primary" type="button" ng-click="showRelModal(term, null)">

											<span class="glyphicon glyphicon-plus"></span>

										</button>

									</div>

								</div>

		<!-- relModal -->

		<div class="modal fade" id="relModal" tabindex="-1" role="dialog" aria-labelledby="relModalLabel" aria-hidden="true">

			<div class="modal-dialog">

				<div class="modal-content">

					<div class="modal-header">

						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

						<h4 id="relModalLabel">Relation editor</h4>

					</div>

					<div class="modal-body">

						<form name="relForm" class="form-horizontal" role="form">

							<div class="form-group">

								<label class="col-sm-4 control-label" for="refterm">Ref. Term</label>

							    <div class="col-sm-8">

									<span id="refterm" class="form-control" type="text" disabled>{{modalRel.refTerm}}</span>

							    </div>

							</div>

							<div class="form-group" ng-class="{'has-error': !modalRel.value}">

								<label class="col-sm-4 control-label" for="term">Related term</label>

								<div class="col-sm-8">

									<input class="form-control" name="value" type="text" placeholder="new relation" ng-model="modalRel.value">

								</div>

							</div>

							<div class="form-group" ng-class="{'has-error': !modalRel.type}">

								<label class="col-sm-4 control-label" for="encoding">Relation type</label>

								<div class="col-sm-8">

									<input class="form-control" name="type" type="text" placeholder="type" ng-model="modalRel.type">

								</div>

							</div>

						</form>				

					</div>

					<div class="modal-footer">

						<button type="button" class="btn btn-primary" ng-disabled="!(modalRel.type && modalRel.value) " ng-click="editRel()">Save</button>

					</div>

				</div>

			</div>

		</div>

	$scope.modalRel = {};

	$scope.deleteRel = function(term, rel) {

		var termIndex = $scope.entries.indexOf(term);

		var relIndex = $scope.entries[termIndex].relations.indexOf(rel);

		$scope.entries[termIndex].relations.splice(relIndex, 1);

		showPermanotice("Uncommitted changes!");

	}

	}	

	$scope.showRelModal = function(term, rel) {

		$scope.selectedTermIndex = $scope.entries.indexOf(term);

		$scope.selectedRelIndex = $scope.entries[$scope.selectedTermIndex].relations.indexOf(rel);

		if (rel != null) {

			// edit existing synonym

			$scope.modalRel.refTerm = $scope.entries[$scope.selectedTermIndex].englishName;

			$scope.modalRel.value = $scope.entries[$scope.selectedTermIndex].relations[$scope.selectedRelIndex].value;

			$scope.modalRel.type = $scope.entries[$scope.selectedTermIndex].relations[$scope.selectedRelIndex].type;

		} else {

			// new synonym

			$scope.modalRel.refTerm = $scope.entries[$scope.selectedTermIndex].englishName;

			$scope.modalRel.value = '';

			$scope.modalRel.type = '';

		}

		$('#relModal').modal();

			$scope.entries[$scope.selectedTermIndex].synonyms[$scope.selectedSynonymIndex].term = $scope.modalSynonym.term;

	$scope.editRel = function() {

		if ($scope.selectedRelIndex == -1) {

			$scope.entries[$scope.selectedTermIndex].relations.push({

				"value" : $scope.modalRel.value,

				"type" : $scope.modalRel.type

			});

		} else {

			$scope.entries[$scope.selectedTermIndex].relations[$scope.selectedRelIndex].value = $scope.modalRel.value;

			$scope.entries[$scope.selectedTermIndex].relations[$scope.selectedRelIndex].type = $scope.modalRel.type;

		}

		// dismiss modal

		$('.modal').modal('hide');

		showPermanotice("Uncommitted changes!");

	}