diff --git a/public/app/features/org/all.js b/public/app/features/org/all.js
index 0a81c375eb5..140f87fafce 100644
--- a/public/app/features/org/all.js
+++ b/public/app/features/org/all.js
@@ -10,4 +10,5 @@ define([
   './prefs_control',
   './user_groups_ctrl',
   './user_group_details_ctrl',
+  './create_user_group_modal',
 ], function () {});
diff --git a/public/app/features/org/create_user_group_modal.ts b/public/app/features/org/create_user_group_modal.ts
new file mode 100644
index 00000000000..5acc684041f
--- /dev/null
+++ b/public/app/features/org/create_user_group_modal.ts
@@ -0,0 +1,38 @@
+///<reference path="../../headers/common.d.ts" />
+
+import coreModule from 'app/core/core_module';
+import appEvents from 'app/core/app_events';
+import _ from 'lodash';
+
+export class CreateUserGroupCtrl {
+  userGroupName = '';
+
+  /** @ngInject */
+  constructor(private backendSrv, private $scope, $sce, private $location) {
+  }
+
+  createUserGroup() {
+    this.backendSrv.post('/api/user-groups', {name: this.userGroupName}).then((result) => {
+      if (result.userGroupId) {
+        this.$location.path('/org/user-groups/edit/' + result.userGroupId);
+      }
+      this.dismiss();
+    });
+  }
+
+  dismiss() {
+    appEvents.emit('hide-modal');
+  }
+}
+
+export function createUserGroupModal() {
+  return {
+    restrict: 'E',
+    templateUrl: 'public/app/features/org/partials/create_user_group.html',
+    controller: CreateUserGroupCtrl,
+    bindToController: true,
+    controllerAs: 'ctrl',
+  };
+}
+
+coreModule.directive('createUserGroupModal', createUserGroupModal);
diff --git a/public/app/features/org/partials/create_user_group.html b/public/app/features/org/partials/create_user_group.html
index bad08b206d9..1ef0ef2822e 100644
--- a/public/app/features/org/partials/create_user_group.html
+++ b/public/app/features/org/partials/create_user_group.html
@@ -1,23 +1,26 @@
-<div class="modal-body" ng-controller="UserGroupsCtrl">
+<div class="modal-body">
   <div class="modal-header">
 		<h2 class="modal-header-title">
-			Create User Group
+			<span class="p-l-1">Create User Group</span>
 		</h2>
-		<a class="modal-header-close" ng-click="dismiss();">
+
+		<a class="modal-header-close" ng-click="ctrl.dismiss();">
 			<i class="fa fa-remove"></i>
 		</a>
 	</div>
 
 	<div class="modal-content">
-		<form name="createUserGroupForm" class="gf-form-group">
-			<div class="gf-form-inline">
-				<div class="gf-form max-width-21">
-					<input type="text" class="gf-form-input" ng-model='ctrl.userGroupName' placeholder="Name"></input>
-				</div>
-				<div class="gf-form">
-					<button class="btn gf-form-btn btn-success" ng-click="ctrl.createUserGroup();dismiss();">Create</button>
-				</div>
-			</div>
+		<form name="ctrl.createUserGroupForm" class="gf-form-group" novalidate>
+      <div class="p-t-2">
+        <div class="gf-form-inline">
+          <div class="gf-form max-width-21">
+            <input type="text" class="gf-form-input" ng-model='ctrl.userGroupName' required give-focus="true" placeholder="Enter User Group Name"></input>
+          </div>
+          <div class="gf-form">
+            <button class="btn gf-form-btn btn-success" ng-click="ctrl.createUserGroup();ctrl.dismiss();">Create</button>
+          </div>
+        </div>
+      </div>
 		</form>
 	</div>
 </div>
diff --git a/public/app/features/org/user_groups_ctrl.ts b/public/app/features/org/user_groups_ctrl.ts
index 547d23d896f..da1f767acd5 100644
--- a/public/app/features/org/user_groups_ctrl.ts
+++ b/public/app/features/org/user_groups_ctrl.ts
@@ -1,6 +1,7 @@
 ///<reference path="../../headers/common.d.ts" />
 
 import coreModule from 'app/core/core_module';
+import {appEvents} from 'app/core/core';
 
 export class UserGroupsCtrl {
   userGroups: any;
@@ -10,7 +11,6 @@ export class UserGroupsCtrl {
   totalPages: number;
   showPaging = false;
   query: any = '';
-  userGroupName: any = '';
   navModel: any;
 
   /** @ngInject */
@@ -40,14 +40,6 @@ export class UserGroupsCtrl {
     this.get();
   }
 
-  createUserGroup() {
-    this.backendSrv.post('/api/user-groups', {name: this.userGroupName}).then((result) => {
-      if (result.userGroupId) {
-        this.$location.path('/org/user-groups/edit/' + result.userGroupId);
-      }
-    });
-  }
-
   deleteUserGroup(userGroup) {
     this.$scope.appEvent('confirm-modal', {
       title: 'Delete',
@@ -66,13 +58,9 @@ export class UserGroupsCtrl {
   }
 
   openUserGroupModal() {
-    var modalScope = this.$scope.$new();
-    modalScope.createUserGroup = this.createUserGroup.bind(this);
-
-    this.$scope.appEvent('show-modal', {
-      src: 'public/app/features/org/partials/create_user_group.html',
-      modalClass: 'modal--narrow',
-      scope: modalScope
+    appEvents.emit('show-modal', {
+      templateHtml: '<create-user-group-modal></create-user-group-modal>',
+      modalClass: 'modal--narrow'
     });
   }
 }