controller

$scope.advancePanel = false;

//get all roles
$http.get('/skill/get/all/roles').success(function (resp) {
    $scope.roles = resp;
    //console.log(resp);
});

$scope.roleSelectionPanel = '';
$scope.activeRoleAssignmentPanel = function () {
    $scope.roleSelectionPanel = 'show';
    $scope.selectedRole = null;
    $scope.selectedSkills = [];
};

$scope.selectedRole = null;
$scope.selectedSkills = [];
$scope.populateRawSkill = function () {
    $scope.selectedSkills = angular.copy($scope.selectedRole.rawSkills);
};

$scope.selectedRoles = []; //role n skills
//role ID and list of skills employee has for the relevant skills
$scope.selectedRolesId = [];

$scope.saveRole = function (role, selectedItem) {
    var r = {
        role: $scope.selectedRole,
        skills: $scope.selectedSkills
    };

    $scope.selectedRoles.push(r);

    //looping each skill in skill list to obtain skill ID
    $scope.list = [];
    angular.forEach($scope.selectedSkills, function (skill, index) {
        var cert = {
            skillId: skill.id,
            certificated: skill.certificated,
            certification: skill.certification
        };
        $scope.list.push(cert);
    });

    //string relevant role ID and skill IDs into an object/bean.
    rsID = {
        roleId: $scope.selectedRole.id,
        skillIdList: $scope.list
    };
    //pushing object to scope
    $scope.selectedRolesId.push(rsID);
    console.log($scope.selectedRoles);

    $scope.roleSelectionPanel = '';
    //after everything has been recorded, delete the selected item from list
};

$scope.deleteRole = function (index) {
    //deleting the item from THIS list
    $scope.selectedRoles.splice(index, 1);
    $scope.selectedRolesId.splice(index, 1);

    //re-add the item in my select-options

};