Seeking a solution for updating angular-ui route parameters based on select field changes.
Issue: The route successfully updates with the selected parameter, but the select field does not reflect the change in option selection.
Check out the Plunkr. Click on the Search link and modify the select field to see the scope change without updating the selected option.
Controller:
.controller('SearchCtrl', ['$scope', '$state', '$stateParams', function ($scope, $state, $stateParams) {
$scope.data = {
pageSizes: [12, 24, 48],
pageSize: $stateParams.size,
goSearch: {}
};
$scope.data.goSearch = function () {
$state.go('search', {size: $scope.data.pageSize});
}
}]);
Select:
<select name="pageSizes" id="pageSizes" ng-model="data.pageSize" ng-change="data.goSearch()" class="form-control">
<option ng-repeat="label in data.pageSizes" value="{{label}}">{{label}}</option>
</select>
For more details, refer to the Plunkr.