Почему при зацикливании нескольких массивов в AngularJS один из них теряет свое содержимое?

Question

У меня есть таблица, в которой я показываю права пользователя, разрешения для роли и дополнительные разрешения, установленные для этого пользователя. Когда я выбираю роль в списке, я вызываю метод renderPermissions и, когда я выбираю дополнительное разрешение, тоже. Массив дополнительных разрешений теряет содержимое, когда я проверяю истинность некоторых прав доступа (в другом массиве). Зачем? Не могу понять, почему.

Я пытался все время тестировать в консоли содержимое трех массивов, и все идет отлично, за исключением случаев, когда я зацикливаю массив AdditionalPermissions.

Таблица разрешений для отображения

<div class="col-md-12">
    <label>Tabla de permisos seleccionados</label>
    <div class="row">
        <div class="col-md-3" ng-repeat="permission in permissions track by $index">
            [[permission.name]]: 
            <i ng-if="!permission.selected" class="fa fa-ban text-danger"></i>
            <i ng-if="permission.selected" class="fa fa-check text-success"></i>
        </div>
    </div>
</div>

Выбор роли Рол дель Усуарио

Дополнительные разрешения списка множественного выбора

<div class="form-group col-md-6">
    <label>Permisos adicionales</label><br/>
    <select name="role" class="form-control" id="permissionList" ng-change="changeList()" ng-model="additionalPermissions" multiple style="width: 100%;">
        <option ng-repeat="permission in permissions track by $index" value="[[permission.name]]" ng-disabled="permission.selected">[[permission.name]]</option>
    </select>
</div>

Приложение AngularJS

var app = angular.module('UsersApp', []);

app.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('[[').endSymbol(']]');
});

app.controller('UsersController', function ($scope) {
    $scope.permissions = [{"id":1,"name":"Visualizar desaf\u00edos","selected":false},{"id":2,"name":"Editar desaf\u00edos","selected":false},{"id":3,"name":"Crear desaf\u00edos","selected":false},{"id":4,"name":"Editar usuarios","selected":false},{"id":5,"name":"Eliminar usuarios","selected":false},{"id":6,"name":"Editar permisos","selected":false},{"id":7,"name":"Eliminar permisos","selected":false},{"id":8,"name":"Editar roles","selected":false},{"id":9,"name":"Eliminar roles","selected":false}];
    $scope.rolesPermissions = [{"name":"Super Admin","permissions":["Visualizar desaf\u00edos","Editar desaf\u00edos","Crear desaf\u00edos","Editar usuarios","Eliminar usuarios","Editar permisos","Eliminar permisos","Editar roles","Eliminar roles"]},{"name":"Admin","permissions":["Visualizar desaf\u00edos","Editar desaf\u00edos","Crear desaf\u00edos","Editar usuarios"]},{"name":"Editor","permissions":["Visualizar desaf\u00edos","Editar desaf\u00edos","Crear desaf\u00edos"]}];

    $scope.cleanSelectedPermissions = function () {
        angular.forEach($scope.permissions, function (permission) {
            permission.selected = false;
        });
    };

    $scope.renderPermissions = function () {
        console.log($scope.additionalPermissions);
        angular.forEach($scope.permissions, function (permission) {
            angular.forEach($scope.selectedRole.permissions, function(rolePermission) {
                if (rolePermission == permission.name) {
                    permission.selected = true;
                }
            });

            angular.forEach($scope.additionalPermissions, function (additionalPermission) {
                if (additionalPermission == permission.name) {
                    permission.selected = true;
                }
            });
        });
        console.log($scope.additionalPermissions);
    };

    $scope.changeList = function () {
        $scope.cleanSelectedPermissions();
        $scope.renderPermissions();
    };

    $scope.selectedRole = $scope.rolesPermissions[0];
    $scope.additionalPermissions = [];
    $scope.changeList();
});

Как вы видите в разрешениях рендеринга, сначала я зацикливаю $scope.permissions и значение rolePermission, если оно равно, затем помечаю разрешение как выбранное. Когда я делаю то же самое для массива $scope.additionalPermissions, он теряет содержимое, и разрешение не помечается как выбранное, как я ожидал. Почему это происходит?

РЕДАКТИРОВАТЬ: Мне удалось это исправить, но я не знаю, почему это происходит, может какой-нибудь гуру AngularJS сказать нам, почему это происходит?

Я изменил код представления дополнительных прав доступа на это:

<div class="form-group col-md-6">
    <label>Permisos adicionales</label><br/>
    <select name="role" class="form-control" id="permissionList" ng-change="changeList()" ng-model="additionalPermissions"  ng-options="permission.name for permission in permissions" multiple style="width: 100%;"></select>
</div>

Как видите, я удалил параметры ngRepeat и добавил директиву ngOptions. Пожалуйста, объясните нам, почему это работает, но опции с ngRepeat не работают. Большое спасибо.

Answer 1

Мне удалось это исправить. Это может быть решено добавлением ngOptions в select вместо ngRepeat с тегом options.