Бутонът AngularJs / Bootstrap - Bind не работи правилно - angularjs, html5

Имам списък с роли, който филтрира списък с разрешения. Списъкът с разрешения има квадратче за отметка, че е избрано.

Всяка роля има списък с свързаните с нея разрешения. Когато бъде избрана роля, всички налични разрешения се показват и вече се свързват с тях. Като кликнете върху квадратчето за отметка на всяко разрешение, можете да го свържете или да го откажете.

Но действието за разрешение за избор и премахване на разрешението не работи правилно. Не мога да разбера какъв е проблемът. Може ли някой да ми помогне? Благодаря!!!

Код в Plunker

Код на страницата

 <div class="panel-body">
<div class="form-group">
<div class="col-md-6">
<div class="list-group">
<a ng-click="selectRole(role)" ng-repeat="role in model.roles" class="list-group-item" ng-class="{active: role.id == model.selectedRole.id}">{{role.name}}</a>
</div>
</div>
<div class="col-md-6">
<div class="list-group">
<a ng-repeat="permission in model.permissions" class="list-group-item">{{permission.name}}                  <input type="checkbox" class="pull-right" ng-checked="isSelected(permission.id) > -1" ng-click="clickPermission(permission)" ng-class="{active: permission.id == model.selectedPermission.id}" />
</a>
</div>
</div>
</div>
</div>

Код на контролера

app.controller("PermissionsToRoleController", function($scope) {

$scope.model = {
roles: [],
permissions: [],
selectedRole: null,
selectedPermission: null
};

$scope.selectRole = function(role) {
$scope.model.selectedRole = role;
}

var findRoles = function() {
$scope.model.roles = [{id: 1, name: "ADMIN", permissions: [{id: 1, name:"MASTER"}] },
{id: 2, name: "USER",  permissions: [] }
];

$scope.model.permissions = [{id: 1, name: "MASTER"}];

$scope.model.selectedRole = $scope.model.roles[0];
};

$scope.clickPermission = function(permission) {
$scope.model.selectedPermission = permission;
var idx = $scope.isSelected(permission.id);
if (idx > -1) {
$scope.model.selectedRole.permissions.splice(idx, 1);
} else {
$scope.model.selectedRole.permissions.push(permission);
}
};

$scope.isSelected = function(permissionId) {
for (var i = 0; i < $scope.model.selectedRole.permissions.length ; i++) {
if ($scope.model.selectedRole.permissions[i].id === permissionId) {
return i;
}
}
return -1;
}

findRoles();

});

Отговори:

Проблемът, който намерих като квадратче за отметка, докато функционира правилно, дисплеят спечели "t" махнете отметката ", когато кликнете върху него.

Това може да бъде фиксирано, като промените обкръжаващия елемент span вместо a

<span ng-repeat="permission in model.permissions" class="list-group-item">{{permission.name}}
<input type="checkbox" class="pull-right" ng-checked="isSelected(permission.id) > -1" ng-click="clickPermission(permission)" ng-class="{active: permission.id == model.selectedPermission.id}" />
</span>

Не съм сигурен в причината за това.