Angularjs fill form fields in bootstrap modal

Question

I'm changing my Thymeleaf code in Angularjs and I have this modal:

<div class="modal" id="addLicenseModal" ng-app="myApp">
            <div class="modal-dialog" ng-controller="freeUserController">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">New license</h4>
                    </div>
                    <div class="modal-body">
                    <div ng-show='users.length > 0'> 
                         <!-- <div th:if="${#lists.size(users)}!=0">  -->
                            <form id="addLicenseForm" role="form" action="#"
                                th:action="@{/administration/license}"
                                th:object="${clientLicenseForm}" method="post">
                                <!-- form start -->
                                <div class="box-body">
                                    <div class="form-group" id=existingUser>
                                         <label>Username</label> <select class="form-control select2"
                                            style="width: 100%;" name="user" ng-model="selectedItem" ng-options="user.username for user in users">                                  
                                        </select>
                                    </div>

                                    <!-- <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> -->
                                    <div class="form-group">
                                        <label>Date and time range</label>
                                        <div class="input-group">
                                            <div class="input-group-addon">
                                                <i class="fa fa-clock-o"></i>
                                            </div>
                                            <input type="text" class="form-control pull-right active"
                                                id="reservationtime"> <input type="hidden"
                                                name="startDate" id="selectedStartDate"> <input
                                                type="hidden" name="endDate" id="selectedEndDate">

                                        </div>
                                        <!-- /.input group -->
                                    </div>
                                    <div class="form-group">
                                        <label>Execution number</label><span id="errmsg"
                                            style="float: right; color: red"></span> <input
                                            th:field="*{counter}" id="executionNumber" type="number"
                                            class="form-control" placeholder="executionNumber">
                                    </div>
                                    <div class="form-group">
                                        <label>MAC address</label> <input id="macAddress" type="text"
                                            class="form-control" th:field="*{macAddress}" maxlength="25"
                                            placeholder="MAC address">
                                    </div>
                                    <div class="form-group">
                                        <label>CPU ID</label> <input id="cpuId" type="text"
                                            class="form-control" th:field="*{cpuId}" maxlength="25"
                                            placeholder="CPU ID">
                                    </div>
                                </div>
                            </form>
                        </div> 
                         <p ng-show="users.length == 0">All clients have the own
                            license, you can update a license with UPDATE button.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default pull-left"
                            data-dismiss="modal">Close</button>
                        <button  ng-show='users.length > 0' id="createLicenseButton"
                            type="button" class="btn btn-primary">Create license</button>
                        <button ng-show='users.length == 0' id="createLicenseButton"
                            type="button" class="btn btn-primary" disabled>Create
                            license</button>

                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>

At this moment only select field is in Angular, and I can't store the right information in name="user", it stores object:7 for example and not the username. From the Spring controller I have

@Override
    @RequestMapping(value = { "/license" }, method = RequestMethod.GET)
    public String license(Model model){
        try{
            model.addAttribute("licenses", administrationService.getClientLicense());
            model.addAttribute("clientLicenseForm", new ClientLicenseForm());
            model.addAttribute("error", false);
        }catch(Exception e){
            LOG.error("Threw exception in AdministrationControllerImpl::license : " + ErrorExceptionBuilder.buildErrorResponse(e));
            model.addAttribute("error",true);
        }
        return "license";
    }

And my javascript code has this instructions for the select:

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;
        $scope.selectedItem = $scope.users[0].username;
        // 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.
    });

});

Where is the error in select field? is it possible to make all in Angularjs? Thanks

UPDATE: I fixed with select as but angular set the value as string:luca and not only luca

Answer 1

我已经解决了阅读官方文档并使用以下代码的问题：

ng-options="user.username as user.username for user in users track by user.username"