diff --git a/public/app/features/dashboard/all.js b/public/app/features/dashboard/all.js
index 9ca6f190c63..cdea7aab3c6 100644
--- a/public/app/features/dashboard/all.js
+++ b/public/app/features/dashboard/all.js
@@ -13,6 +13,7 @@ define([
   './viewStateSrv',
   './time_srv',
   './unsavedChangesSrv',
+  './unsaved_changes_modal',
   './timepicker/timepicker',
   './graphiteImportCtrl',
   './impression_store',
diff --git a/public/app/features/dashboard/unsavedChangesSrv.js b/public/app/features/dashboard/unsavedChangesSrv.js
index df38c7843f8..766ebce0b59 100644
--- a/public/app/features/dashboard/unsavedChangesSrv.js
+++ b/public/app/features/dashboard/unsavedChangesSrv.js
@@ -134,34 +134,31 @@ function(angular, _) {
       return currentJson !== originalJson;
     };
 
+    p.discardChanges = function() {
+      this.original = null;
+      this.gotoNext();
+    };
+
     p.open_modal = function() {
-      var tracker = this;
-      var dashboard = this.current;
-
-      var modalScope = this.scope.$new();
-      var clone = dashboard.getSaveModelClone();
-
-      modalScope.clone = clone;
-      modalScope.ignore = function() {
-        tracker.original = null;
-        tracker.goto_next();
-      };
-
-      var cancel = $rootScope.$on('dashboard-saved', function() {
-        cancel();
-        $timeout(function() {
-          tracker.goto_next();
-        });
-      });
-
       $rootScope.appEvent('show-modal', {
-        src: 'public/app/partials/unsaved-changes.html',
-        scope: modalScope,
-        modalClass: 'modal--narrow'
+        templateHtml: '<unsaved-changes-modal dismiss="dismiss()"></unsaved-changes-modal>',
+        modalClass: 'modal--narrow confirm-modal'
       });
     };
 
-    p.goto_next = function() {
+    p.saveChanges = function() {
+      var self = this;
+      var cancel = $rootScope.$on('dashboard-saved', function() {
+        cancel();
+        $timeout(function() {
+          self.gotoNext();
+        });
+      });
+
+      $rootScope.appEvent('save-dashboard');
+    };
+
+    p.gotoNext = function() {
       var baseLen = $location.absUrl().length - $location.url().length;
       var nextUrl = this.next.substring(baseLen);
       $location.url(nextUrl);
@@ -169,7 +166,8 @@ function(angular, _) {
 
     this.Tracker = Tracker;
     this.init = function(dashboard, scope) {
-      return new Tracker(dashboard, scope, 1000);
+      this.tracker = new Tracker(dashboard, scope, 1000);
+      return this.tracker;
     };
   });
 });
diff --git a/public/app/features/dashboard/unsaved_changes_modal.ts b/public/app/features/dashboard/unsaved_changes_modal.ts
new file mode 100644
index 00000000000..c206ecc2d21
--- /dev/null
+++ b/public/app/features/dashboard/unsaved_changes_modal.ts
@@ -0,0 +1,63 @@
+///<reference path="../../headers/common.d.ts" />
+
+import coreModule from 'app/core/core_module';
+
+const  template = `
+<div class="modal-body">
+  <div class="modal-header">
+    <h2 class="modal-header-title">
+      <i class="fa fa-exclamation"></i>
+      <span class="p-l-1">Unsaved changes</span>
+    </h2>
+
+    <a class="modal-header-close" ng-click="dismiss();">
+      <i class="fa fa-remove"></i>
+    </a>
+  </div>
+
+  <div class="modal-content text-center">
+
+    <div class="confirm-modal-text">
+      What do you want to do?
+    </div>
+
+    <div class="confirm-modal-buttons">
+      <button type="button" class="btn btn-inverse" ng-click="ctrl.dismiss()">Cancel</button>
+      <button type="button" class="btn btn-danger" ng-click="ctrl.discard()">Discard</button>
+      <button type="button" class="btn btn-success" ng-click="ctrl.save()">Save</button>
+    </div>
+  </div>
+</div>
+`;
+
+export class UnsavedChangesModalCtrl {
+  clone: any;
+  dismiss: () => void;
+
+  /** @ngInject */
+  constructor(private $rootScope, private unsavedChangesSrv) {
+  }
+
+  discard() {
+    this.dismiss();
+    this.unsavedChangesSrv.tracker.discardChanges();
+  }
+
+  save() {
+    this.dismiss();
+    this.unsavedChangesSrv.tracker.saveChanges();
+  }
+}
+
+export function unsavedChangesModalDirective() {
+  return {
+    restrict: 'E',
+    template: template,
+    controller: UnsavedChangesModalCtrl,
+    bindToController: true,
+    controllerAs: 'ctrl',
+    scope: {dismiss: "&"}
+  };
+}
+
+coreModule.directive('unsavedChangesModal', unsavedChangesModalDirective);
diff --git a/public/app/partials/unsaved-changes.html b/public/app/partials/unsaved-changes.html
deleted file mode 100644
index 949cef55e7b..00000000000
--- a/public/app/partials/unsaved-changes.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<div class="modal-body" ng-controller="SaveDashboardMessageCtrl" ng-init="init();">
-	<div class="modal-header">
-		<h2 class="modal-header-title">
-			<i class="fa fa-exclamation"></i>
-			<span class="p-l-1">Unsaved changes</span>
-		</h2>
-
-		<a class="modal-header-close" ng-click="dismiss();">
-			<i class="fa fa-remove"></i>
-		</a>
-	</div>
-
-	<form name="saveMessage" ng-submit="saveVersion(saveMessage.$valid)" class="modal-content" novalidate>
-		<h6 class="text-center">
-			You're leaving without saving your changes, are you sure you want to leave? To save, add a small note to describe the changes in this version.
-		</h6>
-		<div class="p-t-2">
-			<div class="gf-form">
-				<label class="gf-form-hint">
-					<input
-						type="text"
-						name="message"
-						class="gf-form-input"
-						placeholder="Updates to &hellip;"
-						give-focus="true"
-						ng-model="clone.message"
-						ng-model-options="{allowInvalid: true}"
-						ng-keydown="keyDown($event)"
-						ng-maxlength="clone.max"
-						autocomplete="off"
-						required />
-					<small class="gf-form-hint-text muted" ng-cloak>
-						<span ng-class="{'text-error': saveMessage.message.$invalid && saveMessage.message.$dirty }">
-							{{clone.message.length || 0}}
-						</span>
-						/ {{clone.max}} characters
-					</small>
-				</label>
-			</div>
-		</div>
-
-		<div class="gf-form-button-row text-center">
-			<button type="submit" class="btn btn-success" ng-disabled="saveMessage.$invalid">
-				Save changes
-			</button>
-			<button type="button" class="btn btn-danger" ng-click="ignore();dismiss()">
-				Discard changes and leave
-			</button>
-			<button class="btn btn-inverse" ng-click="dismiss();">Cancel</button>
-		</div>
-	</form>
-
-</div>
-