diff --git a/assets/app/scripts/directives/nav.js b/assets/app/scripts/directives/nav.js
index 3bdff43fcfd3..d2a21e7fa812 100644
--- a/assets/app/scripts/directives/nav.js
+++ b/assets/app/scripts/directives/nav.js
@@ -27,26 +27,44 @@ angular.module('openshiftConsole')
       },       
       templateUrl: 'views/_project-nav.html',
       link: function ($scope, element, attrs) {
-        // The double timeout is a hack to guarantee DOM is finished rendering
-        $timeout(function () {
-          $timeout(function () {
-            $('.selectpicker').selectpicker({
-                  iconBase: 'fa',
-                  tickIcon: 'fa-check'
-              }).change(function() {
-              var newProject = $( this ).val();
-              var currentURL = $location.url();
-              var currProjRegex = /\/project\/[^\/]+/;
-              var currProjPrefix = currProjRegex.exec(currentURL);
-              var newURL = currentURL.replace(currProjPrefix, "/project/" + encodeURIComponent(newProject));
-              $scope.$apply(function() {
-                $location.url(newURL);
-              });
-            });
+        var select = $('.selectpicker', element);
 
-            LabelFilter.setupFilterWidget($(".navbar-filter-widget", element), $(".active-filters", element));
-          }, 0);
-        }, 0);
+        var updateOptions = function(projects) {
+          $each(projects, function(name, project) {
+            $('<option>')
+              .attr("value", project.metadata.name)
+              .attr("selected", project.metadata.name == $scope.selected)
+              .text(project.displayName || project.metadata.name)
+              .appendTo(select);
+          });
+          // TODO add back in when we support create project 
+          // <option data-divider="true"></option>
+          // <option>Create new</option>          
+        };
+
+        updateOptions($scope.projects);
+
+        select.selectpicker({
+              iconBase: 'fa',
+              tickIcon: 'fa-check'
+          }).change(function() {
+          var newProject = $( this ).val();
+          var currentURL = $location.url();
+          var currProjRegex = /\/project\/[^\/]+/;
+          var currProjPrefix = currProjRegex.exec(currentURL);
+          var newURL = currentURL.replace(currProjPrefix, "/project/" + encodeURIComponent(newProject));
+          $scope.$apply(function() {
+            $location.url(newURL);
+          });
+        });
+
+        LabelFilter.setupFilterWidget($(".navbar-filter-widget", element), $(".active-filters", element));
+
+        $scope.$watch("projects", function(projects) {
+          select.empty();
+          updateOptions(projects);
+          select.selectpicker('refresh');
+        });
       }      
     };
   })
diff --git a/assets/app/views/_project-nav.html b/assets/app/views/_project-nav.html
index f7259c08ee75..3bc54273eaa6 100644
--- a/assets/app/views/_project-nav.html
+++ b/assets/app/views/_project-nav.html
@@ -3,13 +3,7 @@
     <div class="form-group">
       <label class="control-label" for="boostrapSelect">Projects</label>
       <!-- TODO add multiple attribute back to the select tag when we support selecting multiple -->
-      <select class="selectpicker form-control" data-selected-text-format="count>3" id="boostrapSelect">
-        <option ng-selected="selected == proj.metadata.name" ng-repeat="proj in projects" value="{{proj.metadata.name}}">{{proj.displayName || proj.metadata.name}}</option>
-        <!-- TODO add back in when we support create project 
-        <option data-divider="true"></option>
-        <option>Create new</option>
-        -->
-      </select>
+      <select class="selectpicker form-control" data-selected-text-format="count>3" id="boostrapSelect"></select>
     </div>
   </div>
   <div class="navbar-search filter">
diff --git a/pkg/assets/bindata.go b/pkg/assets/bindata.go
index 5b936fd45b0a..d09cce126925 100644
--- a/pkg/assets/bindata.go
+++ b/pkg/assets/bindata.go
@@ -13363,20 +13363,23 @@ projects:"=",
 selected:"="
 },
 templateUrl:"views/_project-nav.html",
-link:function(d, e) {
-a(function() {
-a(function() {
-$(".selectpicker").selectpicker({
+link:function(a, d) {
+var e = $(".selectpicker", d), f = function(b) {
+$each(b, function(b, c) {
+$("<option>").attr("value", c.metadata.name).attr("selected", c.metadata.name == a.selected).text(c.displayName || c.metadata.name).appendTo(e);
+});
+};
+f(a.projects), e.selectpicker({
 iconBase:"fa",
 tickIcon:"fa-check"
 }).change(function() {
-var a = $(this).val(), c = b.url(), e = /\/project\/[^\/]+/, f = e.exec(c), g = c.replace(f, "/project/" + encodeURIComponent(a));
-d.$apply(function() {
+var c = $(this).val(), d = b.url(), e = /\/project\/[^\/]+/, f = e.exec(d), g = d.replace(f, "/project/" + encodeURIComponent(c));
+a.$apply(function() {
 b.url(g);
 });
-}), c.setupFilterWidget($(".navbar-filter-widget", e), $(".active-filters", e));
-}, 0);
-}, 0);
+}), c.setupFilterWidget($(".navbar-filter-widget", d), $(".active-filters", d)), a.$watch("projects", function(a) {
+e.empty(), f(a), e.selectpicker("refresh");
+});
 }
 };
 } ]).directive("projectPage", function() {
@@ -55250,10 +55253,7 @@ func views_pods_html() ([]byte, error) {
 	return _views_pods_html, nil
 }
 
-var _views_project_nav_html = []byte(`<div class="navbar-project"> <div class="navbar-project-menu"> <div class="form-group"> <label class="control-label" for="boostrapSelect">Projects</label> <!-- TODO add multiple attribute back to the select tag when we support selecting multiple --> <select class="selectpicker form-control" data-selected-text-format="count>3" id="boostrapSelect"> <option ng-selected="selected == proj.metadata.name" ng-repeat="proj in projects" value="{{proj.metadata.name}}">{{proj.displayName || proj.metadata.name}} <!-- TODO add back in when we support create project 
-        <option data-divider="true"></option>
-        <option>Create new</option>
-        --> </select> </div> </div> <div class="navbar-search filter"> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label class="control-label">Filter by labels</label> <div class="navbar-filter-widget"> </div> </div> </div> <div class="col-md-6 active-filters"> </div> </div> </div> </div> </div>`)
+var _views_project_nav_html = []byte(`<div class="navbar-project"> <div class="navbar-project-menu"> <div class="form-group"> <label class="control-label" for="boostrapSelect">Projects</label> <!-- TODO add multiple attribute back to the select tag when we support selecting multiple --> <select class="selectpicker form-control" data-selected-text-format="count>3" id="boostrapSelect"></select> </div> </div> <div class="navbar-search filter"> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label class="control-label">Filter by labels</label> <div class="navbar-filter-widget"> </div> </div> </div> <div class="col-md-6 active-filters"> </div> </div> </div> </div> </div>`)
 
 func views_project_nav_html() ([]byte, error) {
 	return _views_project_nav_html, nil