index.html

<!-- list of draft survey questions -->
<div class="questionList" ng-repeat="question in draftQuestionBank | orderBy: 'order'">
	<div ng-if="question.type === 'textField'" class="survey-class">
		<text-field title="question.question" survey-title="question.mainTitle" draft-index="question.order" edit-state="true"></text-field>
	</div>
	<div ng-if="question.type === 'textArea'">
		<text-area-field title="question.question" survey-title="question.mainTitle" index="{{ $index + 1 }}"></text-area-field>
	</div>
	<div ng-if="question.type === 'multipleChoice'">
		<mcq title="question.question" survey-title="question.mainTitle" index="{{ $index + 1 }}"></mcq>
	</div>
</div>

text-field.js

surveyDetailModule.directive('textField', textFieldDirective);

function textFieldDirective($http, $rootScope) {
	var directive = {
		restrict: 'E',
		templateUrl: '/survey/create/form-tmpl/text-tmpl.html',
		replace: true,
		scope: {
			index: "@",
			title: "=",
			surveyTitle: "=",
			editState: "@",
			draftIndex: "="
		},
		// controller: ['$scope', controllerFunc],
		link: linkFunc
	};

	return directive;

	function controllerFunc($scope) {
		$scope.cancelEdit = function() {
			$scope.editState = false;
		}
	}

	function linkFunc(scope, element, attr) {
		// find cancel button in edit mode
		let cancelDraftBtn = element[0].getElementsByClassName('edit-cancel-btn')[0];
		let angularCancelBtn = angular.element(cancelDraftBtn);
		
		angularCancelBtn.on('click', function() {
			scope.editState = false;
			// this is important. Without $apply, the ng-show doesn't update correctly.
			scope.$apply('editState');
		});
	}

text-temp.html

<div ng-class="{ 'text-box-edit': editState }" class="text-box form-group">
	<div ng-hide="editState">
		<h4>Q{{ index || draftIndex }}. {{ title }}</h4>
		<div class="row">
			<div class="col-md-6">
				<input type="text" class="form-control" id="{{ title }}" disabled>
			</div>
			<div class="col-md-2 col-md-push-4 editOptions">
				<a style="position:absolute; top:0;right:30em;" ng-click="editField(surveyTitle, title)" href="">
					<button type="button" class="btn btn-primary survey-btn edit-btn">Edit</button>
				</a>
				<a style="position:absolute; top:0;right:24em;" ng-click="optionsField()" href="">
					<button type="button" class="btn btn-primary survey-btn">Options</button>
				</a>				 
				<a style="position:absolute; top:0;right:19em;" ng-click="deleteQuestion(surveyTitle, title)" href="">
					<button type="button" class="btn btn-danger">Delete</button>
				</a>
			</div>				
		</div>
	</div>
	<div ng-show="editState">
		<div class="row">
			<div class="col-md-6">
				<div class="dropdown">
				  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
				    {{ type }}
				    <span class="caret"></span>
				  </button>
				  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
				    <li ng-repeat="type in surveyTypes"><a href="">{{ type }}</a></li>
				  </ul>
				</div>	
				<h4>Q {{ index || draftIndex }}.<h4>
				<input type="text" class="form-control" id="{{ title }}" ng-model="updatedValue">
			</div>
			<div class="col-md-2 col-md-push-4">
				<a style="position:absolute; top:2em;right:30em;" ng-click="saveDraftField(title, surveyTitle)" href="">
					<button type="button" class="btn btn-primary survey-btn edit-save-btn">Save</button>
				</a>
				<a style="position:absolute; top:2em;right:24em;" href="">
					<button type="button" class="btn btn-primary survey-btn edit-cancel-btn" id="draft-index" data-index="{{ draftIndex}}">Cancel</button>
				</a>				
			</div>			
		</div>
	</div>
</div>