I’m working on an AngularJS project where I’ve upgraded from ui-select2 to ui-select due to security concerns. However, I’ve run into a couple of issues with the ui-select dropdown:

Search Issue: The search functionality in the dropdown does not seem to work as expected. When I search for an item, the results are not displayed correctly, and the “No matches found” message is not showing as it should.

Here’s the relevant code:

Html :

 <div class="col-sm-3">
  <!--<select name="procurementMode" ui-select2="dropDown" ng-model="templateId" data-placeholder="Select Email Template" class="col-sm-10">
    <option></option>
    <option ng-repeat="t in etemplates" value="{{t.Id}}">{{t.Name}}</option>
  </select>-->
  <ui-select ng-model="templateId.Id" theme="select2" class="col-sm-10" style="width: 100% !important;" convert-to-string stringify-value="true">
    <ui-select-match allow-clear="true" placeholder="Select Email Template">{{$select.selected.Name}}</ui-select-match>
      <ui-select-choices refresh-delay="500" repeat="t.Id | valueToString as t in etemplates | filter:$select.search">
        {{t.Name}}
      </ui-select-choices>
      <div ui-select-no-choice class="no-match-message">No matches found</div>
    </ui-select>
 </div>

JS :

(function (window, angular, undefined) {
    'use strict';
    angular.module('angularModule.controllers').controller('searchempManagerCtrl', ['$scope', '$compile', '$window', 'ajaxCall', '$controller', 'checkPermissions', '$rootScope', 'permissionCheckService', 'emailManagerColumns', '$timeout', function ($scope, $compile, $window, ajaxCall, $controller, checkPermissions, $rootScope, permissionCheckService, emailManagerColumns, $timeout) {
        permissionCheckService.check('Email_Manager_View');
        //Injecting common useful values to the scope
        $controller('commonCtrl', { $scope: $scope });
       $scope.templateId = {Id:null};
       
      $scope.getEmailTemplates = function () {
            ajaxCall.get('/ManageData/EmailTemplates/GetEttEmailTemplates').then(function (data) {
                if (!isValidObject(data)) {
                    return;
                } else {
                    if (data.IsError) {
                        alertify.error(data.Message);
                    } else {
                        $scope.etemplates = data.templates;
                    }
                }
            });
        }

        $scope.init = function () {
            $scope.getEmailTemplates();
        }
        $scope.init();
 //Send Email
        $scope.sendEmail = function () {
            $rootScope.viewLoading = true;
            if (!isValidObject($scope.templateId.Id )) {
                alertify.error("Please Select Email Template");
                $rootScope.viewLoading = false;
                return;
            }
            var selectedRows = getSelectedIdsFromList($scope.gridConfig.getSelectedItems());
            var ids = "";
            if (!$scope.isSelectAll) {
                if (!isValidObject(selectedRows)) {
                    alertify.error("Please select a record to send an email.");
                    $rootScope.viewLoading = false;
                    return;
                }
                if (selectedRows.length == 0) {
                    alertify.error("Please select a record to send an email.");
                    $rootScope.viewLoading = false;
                    return;
                } else {
                    if (selectedRows.length > 0) {
                        // for (var i = 0; i < selectedRows.length; ++i) {
                        ids = selectedRows.join();
                        // }
                    }
                }
            }
            $scope.sendEmailData = JSON.stringify({
                templateId: $scope.templateId.Id,
                employeids: ids,
                isSelectAll: $scope.isSelectAll,
                emailManager: $scope.search
            });

            ajaxCall.post('/ETT/EmailManager/SendEmail', $scope.sendEmailData)
                .then(function (data) {
             if (isValidObject(data)) {
              if (!data.isError) {
                  $rootScope.viewLoading = false;
                  if (data.Message != "")
                      log(data.Message);
                  if (data.InvalidEmailMessage != "")
                      alertify.error(data.InvalidEmailMessage);
                  if (data.EmailNotFoundMessage != "")
                      alertify.error(data.EmailNotFoundMessage);
                  if (data.ToEmailNotFound != "")
                      alertify.error(data.ToEmailNotFound);
                  if (data.DateOfJoining != "")
                      alertify.error(data.DateOfJoining);
                  if (data.EmpClassNotFound != "")
                      log(data.EmpClassNotFound);

              } else {
                  $rootScope.viewLoading = false;
                  alert(data.Message);
              }
          }
      }, function (data) {
          consoleLog("Error: " + data.statusText);
          $rootScope.viewLoading = false;
      });
        }

    }]);
})(window, window.angular);

What I Have Tried:

• Checked the ui-select documentation to ensure proper configuration.
• Verified that etemplates contains the expected data.
• Confirmed that templateId.Id is correctly bound to the ng-model.

Observed that during search, the dropdown displays incorrect data and the “No matches found” message does not appear as expected.