diff --git a/app/views/membership.html b/app/views/membership.html
index 77b3feb027..fd7b71e13b 100644
--- a/app/views/membership.html
+++ b/app/views/membership.html
@@ -137,8 +137,8 @@ <h3>
                         <span ng-bind="subject.newRole.metadata.name"></span>
                       </ui-select-match>
                       <ui-select-choices
-                        repeat="role as role in filteredRoles | filter: excludeExistingRoles(subject.roles) | filter: $select.search | orderBy: 'metadata.name'">
-                        <div>{{ role.metadata.name }}</div>
+                        repeat="role as role in filteredRoles | filter: excludeExistingRoles(subject.roles) | filter: { metadata: { name: $select.search } } track by (role | uid)">
+                        <div ng-bind-html="role.metadata.name | highlight: $select.search"></div>
                         <div ng-if="role | annotation : 'description'">
                           <small>{{role | annotation : 'description'}}</small>
                         </div>
@@ -251,8 +251,8 @@ <h3>
                           <span ng-bind="newBinding.newRole.metadata.name"></span>
                         </ui-select-match>
                         <ui-select-choices
-                          repeat="role as role in filteredRoles | filter: $select.search | orderBy: 'metadata.name'">
-                          <div>{{ role.metadata.name }}</div>
+                          repeat="role as role in filteredRoles | filter: { metadata: { name: $select.search } } track by (role | uid)">
+                          <div ng-bind-html="role.metadata.name | highlight: $select.search"></div>
                           <div ng-if="role | annotation : 'description'">
                             <small>{{role | annotation : 'description'}}</small>
                           </div>
diff --git a/dist/scripts/templates.js b/dist/scripts/templates.js
index e8a7485f89..52bbc14461 100644
--- a/dist/scripts/templates.js
+++ b/dist/scripts/templates.js
@@ -10510,8 +10510,8 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<ui-select-match placeholder=\"Select a role\">\n" +
     "<span ng-bind=\"subject.newRole.metadata.name\"></span>\n" +
     "</ui-select-match>\n" +
-    "<ui-select-choices repeat=\"role as role in filteredRoles | filter: excludeExistingRoles(subject.roles) | filter: $select.search | orderBy: 'metadata.name'\">\n" +
-    "<div>{{ role.metadata.name }}</div>\n" +
+    "<ui-select-choices repeat=\"role as role in filteredRoles | filter: excludeExistingRoles(subject.roles) | filter: { metadata: { name: $select.search } } track by (role | uid)\">\n" +
+    "<div ng-bind-html=\"role.metadata.name | highlight: $select.search\"></div>\n" +
     "<div ng-if=\"role | annotation : 'description'\">\n" +
     "<small>{{role | annotation : 'description'}}</small>\n" +
     "</div>\n" +
@@ -10564,8 +10564,8 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<ui-select-match placeholder=\"Select a role\">\n" +
     "<span ng-bind=\"newBinding.newRole.metadata.name\"></span>\n" +
     "</ui-select-match>\n" +
-    "<ui-select-choices repeat=\"role as role in filteredRoles | filter: $select.search | orderBy: 'metadata.name'\">\n" +
-    "<div>{{ role.metadata.name }}</div>\n" +
+    "<ui-select-choices repeat=\"role as role in filteredRoles | filter: { metadata: { name: $select.search } } track by (role | uid)\">\n" +
+    "<div ng-bind-html=\"role.metadata.name | highlight: $select.search\"></div>\n" +
     "<div ng-if=\"role | annotation : 'description'\">\n" +
     "<small>{{role | annotation : 'description'}}</small>\n" +
     "</div>\n" +