diff --git a/designsafe/static/scripts/ng-designsafe/components/index.js b/designsafe/static/scripts/ng-designsafe/components/index.js
index c518e05484..b007e19757 100644
--- a/designsafe/static/scripts/ng-designsafe/components/index.js
+++ b/designsafe/static/scripts/ng-designsafe/components/index.js
@@ -1,7 +1,9 @@
 import './modals';
 import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
+import { NotificationBadgeComponent } from './notification-badge/notification-badge.component';
 
 let designsafeComponents = angular.module('designsafe.components', ['designsafe.components.modals']);
 designsafeComponents.component('breadcrumb', BreadcrumbComponent);
+designsafeComponents.component('notificationBadge', NotificationBadgeComponent)
 
 export default designsafeComponents;
diff --git a/designsafe/static/scripts/ng-designsafe/components/notification-badge/notification-badge.component.html b/designsafe/static/scripts/ng-designsafe/components/notification-badge/notification-badge.component.html
new file mode 100644
index 0000000000..78c64a3402
--- /dev/null
+++ b/designsafe/static/scripts/ng-designsafe/components/notification-badge/notification-badge.component.html
@@ -0,0 +1,57 @@
+<div id="notification-container" class="dropdown btn btn-link" uib-dropdown auto-close="outsideClick">
+    <a id="dLabel" class="dropdown-toggle" role="button" uib-dropdown-toggle ng-click="list()">
+      <i id="notification_bell" role="none" class="fa fa-bell fa-2x"></i>
+      <span id="notification_badge" class="label label-as-badge" ng-class="data.unread > 0 ? 'label-info' : 'label-default'" title="Notifications">
+        {{data.unread}}
+      </span>
+    </a>
+    <div class="arrow-up"></div>
+    <ul uib-dropdown-menu class="dropdown-menu notifications" aria-labelledby="dLabel">
+      <div class="notification-heading">
+          <h3 class="menu-title">Notifications</h3>
+          <a href="{{data.notificationsurl}}">
+            <h3 class="menu-title pull-right">
+              View all
+              <i class="glyphicon glyphicon-circle-arrow-right"></i>
+            </h3>
+          </a>
+      </div>
+      <li class="divider"></li>
+      <div class="notifications-wrapper">
+        <li ng-repeat="x in data.notifications">
+          <div class="notification-item">
+            <a class="content" href="{{x.action_link}}" ng-attr-target="{{ x.operation === 'web_link' ? '_blank' : undefined }}">
+                <dl class="dl-horizontal">
+                  <dt>{{x.datetime| date:'MMM dd, yyyy'}}<br>
+                      {{x.datetime| date:'h:mm a'}}
+                  </dt>
+                  <dd class="item-info">
+                    <span>{{x.message}}</span>
+                    <div ng-if="x.extra.path" uib-tooltip="{{x.extra.path}}" tooltip-trigger="{{{true: 'mouseenter', false: 'never'}[x.extra.path.length > 44]}}">
+                      <div id="notif-path">
+                        <bdi>{{x.extra.path}}</bdi>
+                      </div>
+                    </div>
+                  </dd>
+                </dl>
+            </a>
+            <div class="notif-close-wrapper">
+              <button type="button" class="notif-close close" aria-label="Close" ng-click="delete(x.pk)">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+          </div>
+        </li>
+        <li ng-if="data.notifications.length == 0">
+          <div class="notification-item">You have no notifications.</div>
+        </li>
+      </div>
+      <div ng-if="data.notifications.length > 0">
+        <li class="divider"></li>
+        <h3 class="clear-notifs" ng-click="delete('all')">
+          Clear all notifications
+        </h3>
+      </div>
+    </ul>
+  </div>
+  
\ No newline at end of file
diff --git a/designsafe/static/scripts/ng-designsafe/components/notification-badge/notification-badge.component.js b/designsafe/static/scripts/ng-designsafe/components/notification-badge/notification-badge.component.js
new file mode 100644
index 0000000000..793478a15d
--- /dev/null
+++ b/designsafe/static/scripts/ng-designsafe/components/notification-badge/notification-badge.component.js
@@ -0,0 +1,7 @@
+import { NotificationBadgeCtrl } from '../../controllers/notifications';
+import NotificationBadgeTemplate from './notification-badge.component.html';
+
+export const NotificationBadgeComponent = {
+    controller: NotificationBadgeCtrl,
+    template: NotificationBadgeTemplate,
+};
diff --git a/designsafe/static/scripts/notifications/html/badge.html b/designsafe/static/scripts/notifications/html/badge.html
deleted file mode 100644
index 5927882056..0000000000
--- a/designsafe/static/scripts/notifications/html/badge.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<div id="notification-container" class="dropdown btn btn-link" uib-dropdown auto-close="outsideClick">
-  <a id="dLabel" class="dropdown-toggle" role="button" uib-dropdown-toggle ng-click="list()">
-    <i id="notification_bell" role="none" class="fa fa-bell fa-2x"></i>
-    <span id="notification_badge" class="label label-as-badge" ng-class="data.unread > 0 ? 'label-info' : 'label-default'" title="Notifications">
-      {{data.unread}}
-    </span>
-  </a>
-  <div class="arrow-up"></div>
-  <ul uib-dropdown-menu class="dropdown-menu notifications" aria-labelledby="dLabel">
-    <div class="notification-heading">
-        <h3 class="menu-title">Notifications</h3>
-        <a href="{{data.notificationsurl}}">
-          <h3 class="menu-title pull-right">
-            View all
-            <i class="glyphicon glyphicon-circle-arrow-right"></i>
-          </h3>
-        </a>
-    </div>
-    <li class="divider"></li>
-    <div class="notifications-wrapper">
-      <li ng-repeat="x in data.notifications">
-        <div class="notification-item">
-          <a class="content" href="{{x.action_link}}" ng-attr-target="{{ x.operation === 'web_link' ? '_blank' : undefined }}">
-              <dl class="dl-horizontal">
-                <dt>{{x.datetime| date:'MMM dd, yyyy'}}<br>
-                    {{x.datetime| date:'h:mm a'}}
-                </dt>
-                <dd class="item-info">
-                  <span>{{x.message}}</span>
-                  <div ng-if="x.extra.path" uib-tooltip="{{x.extra.path}}" tooltip-trigger="{{{true: 'mouseenter', false: 'never'}[x.extra.path.length > 44]}}">
-                    <div id="notif-path">
-                      <bdi>{{x.extra.path}}</bdi>
-                    </div>
-                  </div>
-                </dd>
-              </dl>
-          </a>
-          <div class="notif-close-wrapper">
-            <button type="button" class="notif-close close" aria-label="Close" ng-click="delete(x.pk)">
-              <span aria-hidden="true">&times;</span>
-            </button>
-          </div>
-        </div>
-      </li>
-      <li ng-if="data.notifications.length == 0">
-        <div class="notification-item">You have no notifications.</div>
-      </li>
-    </div>
-    <div ng-if="data.notifications.length > 0">
-      <li class="divider"></li>
-      <h3 class="clear-notifs" ng-click="delete('all')">
-        Clear all notifications
-      </h3>
-    </div>
-  </ul>
-</div>
diff --git a/designsafe/templates/includes/header.html b/designsafe/templates/includes/header.html
index ba40b91994..4ef08ee78f 100644
--- a/designsafe/templates/includes/header.html
+++ b/designsafe/templates/includes/header.html
@@ -45,9 +45,7 @@
           class="sr-only">API Session Not Available. Click for details.</span></a>
       {% endif %}
     </span>
-    <span ng-controller="NotificationBadgeCtrl" id="id_user_notify"
-      ng-include="'{% static 'scripts/notifications/html/badge.html' %}'">
-    </span>
+   <notification-badge></notification-badge> 
     <div class="btn-group">
       <a href="{% url 'designsafe_dashboard:index' %}" class="btn btn-link-alt">Welcome, {{ user.first_name }}!</a>
       <button type="button" class="btn btn-link-alt dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"