I am using AngularJS with ui-select to create a dropdown for selecting a holding time period. The dropdown populates correctly and displays the options, but after I perform a search action and select an option, the selected value is not displayed in the input field.
<div class="col-lg-6 col-sm-12 col-xs-12">
<div class="col-lg-4 col-xs-5">
<label class="control-label"><strong>Holding Time Period :
</strong></label>
</div>
<div class="col-lg-4 col-xs-7">
<!--<select name="procurementMode" ui-select2="dropDown" ng-model="search.HoldingTimePeriodId" data-placeholder="Select Holding Time Period" title="Select Holding Time Period">
<option></option>
<option ng-repeat="t in holdingTimePeriods" value="{{t.Id}}">{{t.Display}}</option>
</select>-->
<ui-select name="procurementMode" ng-model="search.HoldingTimePeriodId" theme="select2" style="width: 100% !important;">
<ui-select-match allow-clear="true" placeholder="Select Holding Time Period" title="Select Holding Time Period">{{$select.selected.Display}}</ui-select-match>
<ui-select-choices refresh-delay="1" repeat="t.Id as t in holdingTimePeriods | filter:$select.search">
{{t.Display}}
</ui-select-choices>
</ui-select>
</div>
</div>
JavaScript File
(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.fromdate = "";
$scope.enable = false;
$scope.templateId = { Id: null };
$scope.search = { OpeningStockSubmitted: null, DisclosureSubmitted: null, AnnualHoldingSubmitted: null, HoldingTimePeriodId: null, QuarterlyIntimationSubmitted: null, CompanyId: null, ClassId: null };
$scope.gridConfig.getData = function (e) {
$scope.search.RowsPerPage = $scope.reset ? 20 : e.data.pageSize;
$scope.search.PageNumber = $scope.reset ? 1 : e.data.page;
if (!isValidObject($scope.search.AsOfDateString)) {
alertify.error("Please Select As Of Date");
return;
}
$scope.search.HoldingTimePeriodId = $scope.search.HoldingTimePeriodId ? $scope.search.HoldingTimePeriodId.toString() : null;
$scope.search.QuarterlyIntimationTimePeriodId = $scope.search.QuarterlyIntimationTimePeriodId ? $scope.search.QuarterlyIntimationTimePeriodId.toString() : null;
$scope.search.CompanyId = $scope.search.CompanyId ? $scope.search.CompanyId.toString() : null;
$scope.search.ClassId = $scope.search.ClassId ? $scope.search.ClassId.toString() : null;
//$scope.search.HoldingTimePeriodId = $scope.search.HoldingTimePeriodId.toString();
//$scope.search.QuarterlyIntimationTimePeriodId = $scope.search.QuarterlyIntimationTimePeriodId.toString();
//$scope.search.CompanyId = $scope.search.CompanyId.toString();
//$scope.search.ClassId = $scope.search.ClassId.toString();
$rootScope.viewLoading = true;
$scope.gridConfig.isLocalData = true;
ajaxCall.post('/ETT/EmailManager/SearchEmployees', JSON.stringify({ emailManager: $scope.search }), false).then(function (data) {
if (data.IsError) {
alertify.error(data.Message);
$rootScope.viewLoading = false;
return;
}
$scope.gridConfig.ds = $scope.formatData(data.SearchResults);
$scope.gridConfig.dataCount = data.Count;
$scope.count = data.Count;
e.success({ data: $scope.gridConfig.ds, total: $scope.gridConfig.dataCount });
$rootScope.viewLoading = false;
});
};
$scope.getHoldingTimePeriodList = function () {
ajaxCall.get('/TimePeriod/GetAllHoldingTimePeriods').then(function (data) {
if (!isValidObject(data)) {
return;
} else {
if (data.IsError) {
alertify.error(data.Message);
} else {
console.log('Holding Time Periods:', data.holdingTimePeriods);
$scope.holdingTimePeriods = data.holdingTimePeriods;
}
}
});
}
$scope.exportAllRecords = function (isExportAll) {
$rootScope.viewLoading = true;
if (!isExportAll) {
getExportData_Kendo_GetFile(false, $scope.gridConfig.gridId, $scope.gridConfig.columns, undefined, undefined, undefined, true);
}
else {
xhr_DownloadFile('/ETT/EmailManager/ExportToExcel?asOfDate=' + $scope.search.AsOfDateString + '&joiningDateTo=' + $scope.search.JoiningDateToString + '&joiningDateFrom=' + $scope.search.JoiningDateFromString + '&relievingDateAsOf=' + $scope.search.RelievingDateAsOfString + '&excludeRelieved=' + $scope.search.ExcludeRelieved + '&openingStockSubmitted=' + $scope.search.OpeningStockSubmitted + '&disclosureSubmitted=' +
$scope.search.DisclosureSubmitted + '&annualHoldingSubmitted=' + $scope.search.AnnualHoldingSubmitted + '&holdingTimePeriodId=' + $scope.search.HoldingTimePeriodId.toString() + '&quarterlyIntimationSubmitted=' + $scope.search.QuarterlyIntimationSubmitted + '&quarterlyIntimationTimePeriodId=' + $scope.search.QuarterlyIntimationTimePeriodId.toString() + '&companyId=' + $scope.search.CompanyId.toString() + '&classId=' + $scope.search.ClassId.toString(), 'GET');
}
$rootScope.viewLoading = false;
}
}]);
})(window, window.angular);
Expected Behavior:
After selecting an option, the selected value should be displayed in the ui-select input field.
Actual Behavior:
The selected value is not displayed in the ui-select input field after selection.