diff --git a/public/js/app.js b/public/js/app.js
index e6298321..e143efc8 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -967,6 +967,12 @@ angular.module('cerebro').controller('OverviewController', ['$scope', '$http',
       );
     };
 
+    $scope.isSelected = function(shard) {
+      var relocating = $scope.relocatingShard;
+      return relocating && shard.index === relocating.index &&
+        shard.node === relocating.node && shard.shard === relocating.shard;
+    };
+
     $scope.canReceiveShard = function(index, node) {
       var shard = $scope.relocatingShard;
       if (shard && index) { // in case num indices < num columns
@@ -2116,26 +2122,6 @@ angular.module('cerebro').directive('ngPlainInclude', function() {
   };
 });
 
-angular.module('cerebro').directive('ngShard', function() {
-  return {
-    scope: true,
-    link: function(scope) {
-      var shard = scope.shard;
-      scope.state = shard.state.toLowerCase();
-      scope.replica = !shard.primary && shard.node;
-      scope.id = shard.shard + '_' + shard.node + '_' + shard.index;
-      scope.clazz = scope.replica ? 'shard-replica' : '';
-      scope.equal = function(other) {
-        return other && shard.index === other.index &&
-          shard.node === other.node && shard.shard === other.shard;
-      };
-    },
-    templateUrl: function() {
-      return 'overview/shard.html';
-    }
-  };
-});
-
 angular.module('cerebro').factory('AceEditorService', function() {
 
   this.init = function(name) {
diff --git a/public/overview.html b/public/overview.html
index 98b6751a..75e34221 100644
--- a/public/overview.html
+++ b/public/overview.html
@@ -222,7 +222,26 @@
       </td>
       <td ng-repeat="index in page.elements track by $index">
         <span ng-repeat="shard in index.shards[node.id] | orderBy:'shard' track by $index">
-          <ng-shard></ng-shard>
+          <span class="dropdown">
+            <span class="shard shard-{{shard.state | lowercase}} normal-action"
+                  ng-class="{'shard-replica': !shard.primary && shard.node}"
+                  data-toggle="dropdown"
+                  id="{{shard.shard}}_{{shard.node}}_{{shard.index}}">
+            <small>{{shard.shard}}</small>
+          </span>
+            <ul class="dropdown-menu"
+                aria-labelledby="{{shard.shard}}_{{shard.node}}_{{shard.index}}">
+            <li ng-click="shardStats(shard.index, shard.node, shard.shard)" data-toggle="modal" href="#confirm_dialog" target="_self">
+              <a target="_self"><i class="fa fa-fw fa-info-circle"> </i> display shard stats</a>
+            </li>
+            <li ng-click="select(shard)" ng-hide="isSelected(relocatingShard)">
+              <a target="_self"><i class="fa fa-fw fa-arrows"> </i> select for relocation</a>
+            </li>
+            <li ng-click="select()" ng-show="isSelected(relocatingShard)">
+              <a target="_self"><i class="fa fa-fw fa-arrows"> </i> unselect for relocation</a>
+            </li>
+          </ul>
+          </span>
         </span>
         <span class="shard shard-spot normal-action" ng-click="relocateShard(node)"
               ng-show="canReceiveShard(index, node)">
diff --git a/public/overview/shard.html b/public/overview/shard.html
deleted file mode 100644
index 3b896d96..00000000
--- a/public/overview/shard.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<span class="dropdown">
-<span class="shard shard-{{state}} normal-action {{clazz}}" data-toggle="dropdown" id="{{id}}">
-  <small>{{shard.shard}}</small>
-</span>
-<ul class="dropdown-menu" aria-labelledby="{{id}}">
-  <li ng-click="shardStats(shard.index, shard.node, shard.shard)" data-toggle="modal" href="#confirm_dialog" target="_self">
-    <a target="_self"><i class="fa fa-fw fa-info-circle"> </i> display shard stats</a>
-  </li>
-  <li ng-click="select(shard)" ng-hide="equal(relocatingShard)">
-    <a target="_self"><i class="fa fa-fw fa-arrows"> </i> select for relocation</a>
-  </li>
-  <li ng-click="select()" ng-show="equal(relocatingShard)">
-    <a target="_self"><i class="fa fa-fw fa-arrows"> </i> unselect for relocation</a>
-  </li>
-</ul>
-</span>
diff --git a/src/app/components/overview/controller.js b/src/app/components/overview/controller.js
index b144a5fa..39ef073c 100644
--- a/src/app/components/overview/controller.js
+++ b/src/app/components/overview/controller.js
@@ -286,6 +286,12 @@ angular.module('cerebro').controller('OverviewController', ['$scope', '$http',
       );
     };
 
+    $scope.isSelected = function(shard) {
+      var relocating = $scope.relocatingShard;
+      return relocating && shard.index === relocating.index &&
+        shard.node === relocating.node && shard.shard === relocating.shard;
+    };
+
     $scope.canReceiveShard = function(index, node) {
       var shard = $scope.relocatingShard;
       if (shard && index) { // in case num indices < num columns
diff --git a/src/app/shared/directives/shard.js b/src/app/shared/directives/shard.js
deleted file mode 100644
index 712464fa..00000000
--- a/src/app/shared/directives/shard.js
+++ /dev/null
@@ -1,19 +0,0 @@
-angular.module('cerebro').directive('ngShard', function() {
-  return {
-    scope: true,
-    link: function(scope) {
-      var shard = scope.shard;
-      scope.state = shard.state.toLowerCase();
-      scope.replica = !shard.primary && shard.node;
-      scope.id = shard.shard + '_' + shard.node + '_' + shard.index;
-      scope.clazz = scope.replica ? 'shard-replica' : '';
-      scope.equal = function(other) {
-        return other && shard.index === other.index &&
-          shard.node === other.node && shard.shard === other.shard;
-      };
-    },
-    templateUrl: function() {
-      return 'overview/shard.html';
-    }
-  };
-});