Not able to display/assign value in select2 dropdown

Question

I am loading the data in select2 dropdown on page load. On the UI I can see the dropdown being populated but when I clear the dropdown value and reload the value again, it is not getting populated, though I can see the data is available in the dropdown.

I have tried to use val() and then trigger the change. It did not change the value. I have verified that the value which is passed to the dropdown has the value in the dropdown list.

This is how I am trying to assign the value - $('#s1').val(v.Name); This is how I am clearing the dropdown value - $("#s1").val("");

            $scope.vendorlist = d.data;
            d.data.forEach(function (v) {
                vendors.push({ id: v.Id, text: v.Name });
            });

            $('#s1').select2({
            placeholder: 'Select a field',
            data: vendors,
            }).on('select2:select', function (e) {
            });

The dropdown should show the passed value in the dropdownbox.