energylink/public/app/features/org/partials/edit_user_group.html

<navbar model="ctrl.navModel"></navbar>

<div class="page-container">
	<div class="page-header">
		<h1>Edit User Group</h1>
	</div>

	<form name="userGroupDetailsForm" class="gf-form-group">
		<div class="gf-form">
			<span class="gf-form-label width-10">Name</span>
			<input type="text" required ng-model="ctrl.userGroup.name" class="gf-form-input max-width-14" >
		</div>

		<div class="gf-form-button-row">
			<button type="submit" class="btn btn-success" ng-click="ctrl.update()">Update</button>
		</div>
	</form>

	<h3 class="page-heading">User Group Members</h3>

  <form name="ctrl.addMemberForm" class="gf-form-group">
		<div class="gf-form">
			<span class="gf-form-label width-10">Name</span>
      <user-picker user-id="ctrl.userId"></user-picker>
    </div>

		<div class="gf-form-button-row">
			<button type="submit" class="btn btn-success" ng-click="ctrl.addMember()">Add</button>
		</div>
	</form>

	<table class="grafana-options-table">
		<tr>
			<th>Username</th>
			<th>Email</th>
			<th></th>
		</tr>
		<tr ng-repeat="userGroup in ctrl.userGroupMembers">
			<td>{{userGroup.login}}</td>
			<td>{{userGroup.email}}</td>
			<td style="width: 1%">
				<a ng-click="ctrl.removeUserGroupMember(userGroup)" class="btn btn-danger btn-mini">
					<i class="fa fa-remove"></i>
				</a>
			</td>
		</tr>
	</table>
</div>