diff --git a/rd_ui/app/scripts/directives.js b/rd_ui/app/scripts/directives.js
index dff40d3d5..230ff3fb3 100644
--- a/rd_ui/app/scripts/directives.js
+++ b/rd_ui/app/scripts/directives.js
@@ -7,11 +7,11 @@
         return {
             restrict: 'E',
             scope: {
-                'id': '@',
+                'tabId': '@',
                 'name': '@'
             },
             transclude: true,
-            template: '<li class="rd-tab" ng-class="{active: id==selectedTab}"><a href="#{{id}}">{{name}}<span ng-transclude></span></a></li>',
+            template: '<li class="rd-tab" ng-class="{active: tabId==selectedTab}"><a href="#{{tabId}}">{{name}}<span ng-transclude></span></a></li>',
             replace: true,
             link: function(scope) {
                 scope.$watch(function(){return scope.$parent.selectedTab}, function(tab) {
diff --git a/rd_ui/app/views/queryfiddle.html b/rd_ui/app/views/queryfiddle.html
index 99b3cf3e4..842864ac6 100644
--- a/rd_ui/app/views/queryfiddle.html
+++ b/rd_ui/app/views/queryfiddle.html
@@ -52,13 +52,13 @@
 
     <div class="row" ng-show="queryResult.getStatus() == 'done'">
         <ul class="nav nav-tabs">
-            <rd-tab id="table" name="Table"></rd-tab>
-            <rd-tab id="pivot" name="Pivot Table"></rd-tab>
+            <rd-tab tab-id="table" name="Table"></rd-tab>
+            <rd-tab tab-id="pivot" name="Pivot Table"></rd-tab>
             <!-- hide the table visualization -->
-            <rd-tab id="{{vis.id}}" name="{{vis.name}}" ng-hide="vis.type=='TABLE'" ng-repeat="vis in query.visualizations">
+            <rd-tab tab-id="{{vis.id}}" name="{{vis.name}}" ng-hide="vis.type=='TABLE'" ng-repeat="vis in query.visualizations">
                 <span class="remove" ng-click="deleteVisualization($event, vis)" ng-show="currentUser.canEdit(query)"> &times;</span>
             </rd-tab>
-            <rd-tab id="add" name="&plus; New" removeable="true" ng-show="currentUser.canEdit(query)"></rd-tab>
+            <rd-tab tab-id="add" name="&plus; New" removeable="true" ng-show="currentUser.canEdit(query)"></rd-tab>
         </ul>
 
         <div class="col-lg-12" ng-show="selectedTab == 'table'">
diff --git a/rd_ui/app/views/queryview.html b/rd_ui/app/views/queryview.html
index b2c91504e..737981d90 100644
--- a/rd_ui/app/views/queryview.html
+++ b/rd_ui/app/views/queryview.html
@@ -88,12 +88,12 @@
             <div class="row">
                 <div class="col-lg-12">
                     <ul class="nav nav-tabs">
-                        <rd-tab id="table" name="Table"></rd-tab>
-                        <rd-tab id="pivot" name="Pivot Table"></rd-tab>
-                        <rd-tab id="{{vis.id}}" name="{{vis.name}}" ng-hide="vis.type=='TABLE'" ng-repeat="vis in query.visualizations">
+                        <rd-tab tab-id="table" name="Table"></rd-tab>
+                        <rd-tab tab-id="pivot" name="Pivot Table"></rd-tab>
+                        <rd-tab tab-id="{{vis.id}}" name="{{vis.name}}" ng-hide="vis.type=='TABLE'" ng-repeat="vis in query.visualizations">
                             <span class="remove" ng-click="deleteVisualization($event, vis)" ng-show="canEdit"> &times;</span>
                         </rd-tab>
-                        <rd-tab id="add" name="&plus; New" removeable="true" ng-show="canEdit && isEditing"></rd-tab>
+                        <rd-tab tab-id="add" name="&plus; New" removeable="true" ng-show="canEdit && isEditing"></rd-tab>
                     </ul>
                 </div>
             </div>