Angularjs ng选择未设置的选定值

我正在尝试填充表单以编辑用户列表

index.html:

<h1>Users</h1>
<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Role</th>
        </tr>
    </thead>
    <tbody>
        <tr data-ng-repeat="u in users" data-ng-click="select(u)">
            <td>{{u.id}}</td>
            <td>{{u.username}}</td>
            <td>{{u.role.title}}</td>
        </tr>
    </tbody>
</table>
<form>
    <label for="inputUsername">Username</label>
    <input data-ng-model="selectedUser.username" id="inputUsername" type="text">
    <select  data-ng-model="selectedUser.role"
             data-ng-options="r as r.title for r in roles"
             data-ng-change="">
    </select>
</form>

<pre>{{selectedUser |json}}</pre>

<h1>Users</h1>

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Role</th>
        </tr>
    </thead>
    <tbody>
        <tr data-ng-repeat="u in users" data-ng-click="select(u)">
            <td>{{u.id}}</td>
            <td>{{u.username}}</td>
            <td>{{u.role.title}}</td>
        </tr>
    </tbody>
</table>

<form>
    <label for="inputUsername">Username</label>
    <input data-ng-model="selectedUser.username" id="inputUsername" type="text">
    <select  data-ng-model="selectedUser.role.id"
             data-ng-options="r.id as r.title for r in roles"
             data-ng-change="update()">
    </select>
</form>

我想要实现的是，当我单击表上的一行时，我可以在表单中编辑所选的用户（以保存新值），除了用户角色之外，一切都正常。如果单击某行，则选定的用户角色不会更新

我认为这与角色列表通过重新启动语言调用有关。有人知道我如何优雅地解决这个问题吗

PS：我使用的是角度1.2-rc2

---

BR，Rene

以下解决方案可行，但我认为它不是很优雅：

index.html：

'use strict';

/* Controllers */

angular.module('test-select')
        .controller('IndexCtrl',
        ['$scope', 'Restangular', '$resource', function($scope, Restangular, $resource) {
                $scope.selectedUser = null;

                Restangular.all("roles").getList().then(function(roles) {
                    $scope.roles = roles;
                });
                Restangular.all("users").getList().then(function(users) {
                    $scope.users = users;
                });



                $scope.select = function(user) {
                    $scope.selectedUser = user;
                };

                $scope.update = function() {
                     var role = _.find($scope.roles, function(role){
                         return role.id === $scope.selectedUser.role.id;
                     });
                     $scope.selectedUser.role.title = role.title;
                     $scope.selectedUser.role.bitMask = role.bitMask;
                }
            }]);

---

select

元素的ng模型不应该是

selectedUser.role.title

？很遗憾，它不起作用。见下面我的解决方案。

'use strict';

/* Controllers */

angular.module('test-select')
        .controller('IndexCtrl',
        ['$scope', 'Restangular', '$resource', function($scope, Restangular, $resource) {
                $scope.selectedUser = null;

                Restangular.all("roles").getList().then(function(roles) {
                    $scope.roles = roles;
                });
                Restangular.all("users").getList().then(function(users) {
                    $scope.users = users;
                });



                $scope.select = function(user) {
                    $scope.selectedUser = user;
                };

                $scope.update = function() {
                     var role = _.find($scope.roles, function(role){
                         return role.id === $scope.selectedUser.role.id;
                     });
                     $scope.selectedUser.role.title = role.title;
                     $scope.selectedUser.role.bitMask = role.bitMask;
                }
            }]);