Thymleaf <select><option> update using ajax - ajax

Question

I've got two select option. I want to change the second select options value based on the first option value. I'm using thymleaf as template engine.
When the first select is being selected, I make an ajax call to the controller and get the value as a list. I'm getting the value from ajax call but couldn't able to append the value to the second select option. console.log() shows the option value correctly but it didn't update HTML code.
First Select option:
<select id="brand" th:onchange="changeBrand()" class="form-control">
<option th:selected="true" th:disabled="true"
th:text="'Please Select A Brand'"></option>
<option th:each="brand : ${Calculator}"
th:value="${brand}"
th:text="${brand}">Choose Brand</option>
</select>
Second Select:
<div class="input-group">
<select id="model" class="form-control">
<option th:selected="true" th:disabled="true"
th:text="'Please Select A Model'"></option>
</select>
</div>
Ajax:
<script th:inline="javascript">
/*<![CDATA[*/
function changeBrand() {
var selectedBrand = $( "#brand option:selected" ).text();
$.ajax({
url:"duty/getAllModel",
data:{brand:selectedBrand},
type:"POST",
success:function(data){
// Resetting select option
var select = document.getElementById("model");
select.options.length = 0;
options = data.options;
for (var i = 0; i < data.length; i++) {
select.options[select.options.length] = new Option(data[i],i);
}
for (var i = 0; i < select.childElementCount; i++) {
console.log(select.options[i]);
}
},error:function (error) {
console.log(error);
}
});
}
/*]]>*/
Console.log() value:`
Nokia
Samsung`