diff --git a/arches/app/media/js/views/components/search/time-filter.js b/arches/app/media/js/views/components/search/time-filter.js
index ac7cf1f8f0d..00a114d9f58 100644
--- a/arches/app/media/js/views/components/search/time-filter.js
+++ b/arches/app/media/js/views/components/search/time-filter.js
@@ -41,6 +41,8 @@ function($, _, ko, moment, BaseFilter, arches) {
                 this.selectedPeriod = ko.observable();
                 this.wheelConfig = ko.observable();
                 this.getTimeWheelConfig();
+                this.date_nodes = ko.observableArray();
+                this.graph_models = ko.observableArray();
                 this.selectedPeriod.subscribe(function (d) {
                     if (d) {
                         var start = moment(0, 'YYYY').add(d.start, 'years').format(this.format);
@@ -94,8 +96,9 @@ function($, _, ko, moment, BaseFilter, arches) {
                     url: arches.urls.api_search_component_data + componentName,
                     context: this
                 }).done(function(response) {
-                    this.date_nodes = response.date_nodes;
-                    this.graph_models = response.graph_models;
+                    this.date_nodes(response.date_nodes);
+                    this.graph_models(response.graph_models);
+                    $("select[data-bind^=chosen]").trigger("chosen:updated");
                 });
 
                 this.filterChanged = ko.computed(function(){
diff --git a/arches/app/templates/views/components/search/time-filter.htm b/arches/app/templates/views/components/search/time-filter.htm
index ea6e2294945..83bbc918ec2 100644
--- a/arches/app/templates/views/components/search/time-filter.htm
+++ b/arches/app/templates/views/components/search/time-filter.htm
@@ -16,19 +16,17 @@ <h3 class="search-title" data-bind="visible: showWheel()">{% trans "Time Wheel"
         <!-- Date Type -->
         <div class="calendar">
             <h3 class="search-label">{% trans "Type" %}</h3>
-            <select id="" class="resources" data-placeholder="Date type" tabindex="-1" data-bind="value: filter.dateNodeId, chosen:{ width: '100%' }">
+            <select class="resources" data-placeholder="Date type" tabindex="-1" data-bind="value: filter.dateNodeId, chosen:{ width: '100%' }">
                 <option value="">{% trans "Search all dates" %}</option>
-                {% for graph in graph_models %}
-                    {% if graph.isresource and graph.isactive %}
-                    <optgroup label="{{ graph.name }}">
-                        {% for node in date_nodes %}
-                            {% if graph.graphid == node.graph_id %}
-                            <option value="{{ node.nodeid }}">{{ node.name }}</option>
-                            {% endif %}
-                        {% endfor %}
+                <!-- ko foreach: { data: graph_models, as: 'graph' } -->
+                    <optgroup data-bind="if: (graph.isresource && graph.isactive), attr: { label: graph.name }">
+                        <!-- ko foreach: { data: $parent.date_nodes, as: 'node' } -->
+                            <!-- ko if: graph.graphid === node.graph_id -->
+                                <option data-bind="attr: { value: node.nodeid }, text: node.name"></option>
+                            <!-- /ko -->
+                        <!-- /ko -->
                     </optgroup>
-                    {% endif %}
-                {% endfor %}
+                <!-- /ko -->
             </select>
         </div>