Javascript 使用select2插件调用Angular web服务

我第一次使用Angular是在一个使用Bootstrap和Thymeleaf的项目中。我必须用这个代码来代替

<div class="form-group" id=existingUser>
    <label>Username</label> <select class="form-control select2"
        style="width: 100%;" th:field="*{user}">
        <option th:each="user: ${users}" th:value="${user.username}"
            th:text="${user.username}"></option>
    </select>
</div>

但我有一些问题：

当选择字段中只有一个元素时，如果用户选择 它，它没有显示在字段中，但它保存在我的表单中 变数

使用thymeleaf时，一个元素被选为默认元素，现在如何设置default元素（任意一个）

当模式被单击或在成功的ajax调用中时，如何调用angular http调用

---

您应该考虑使用。还应尝试在使用ng选项的

上使用

ng选项，而不是
ng repeat
，问题已经解决，但如果我添加$scope.selectedItem=$scope.users[0]；它返回不起作用。您应该考虑使用。另外，尝试在使用ng选项的
上使用
ng选项，而不是
ng repeat
，问题已经解决，但如果我添加$scope.selectedItem=$scope.users[0]；它又不起作用了
<div class="box-body" ng-app="myApp">
    <div ng-controller="freeUserController" class="form-group"
        id=existingUser>
        <label>Username</label> <select class="form-control select2"
            style="width: 100%;" name="user">
            <option ng-repeat="user in users" value="{{user.username}}">
                {{user.username}}</option>
        </select>
    </div>

var app = angular.module('myApp',[]);
app.controller('freeUserController', function($scope, $http) {
    $http({
        method: 'GET',
        url: 'users'
    }).then(function successCallback(response) {
        $scope.users = response.data.result;
        // this callback will be called asynchronously
        // when the response is available
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
    });
});


$(function() {
    $("#createLicenseButton").click(
            function() {
                var form = $("#addLicenseForm");        
                $.ajax({
                    type : "POST",
                    url : form.attr("action"),
                    data : form.serialize(),
                    // all right with rest call
                    success : function(data) {  
                        //No exception occurred
                        if (data.status==true){ 
                            //Also the field are right(for e.g. form value)
                            if(data.success==true){
                                //il risultato sta in data.result
                                //window.location.reload(true);
                                location.reload();
                                //reload only the tag with id carsTable, so only the table
                                //$('#carsTable').load(document.URL +  ' #carsTable');
                                $('#addLicenseModal').modal("hide");
                                notifyMessage("Your license has been created!", 'success');
                            }
                            else{
                                //code if there are some error into form for example
                            }
                        } else {
                            //code exception
                            $('#addLicenseModal').modal("hide");
                            notifyMessage("Error! Your license hasn't been created!", 'error');
                        }
                    },
                    //error during rest call
                    error : function(data) {
                        window.location.href = "/ATS/500";
                    }
                });
            });
});