Removing a value from an array and moving them to another Array - angularjs

Question

I have a dropdown values from $scope.role from there I am able to select and remove the respective value from that dropdown and moving the values to $scope.multiRoles array . Which I am also displaying as tags .Which can be find in AddRole()
Now when I click close button in the tag, I am calling removeRoles() , where I am splicing the array which I am selected. But I need to splice them and move them back to $scope.role. Till removing value it works fine , but I am unable to move it back to $scope.role as well. I need atleast one tag should be remained, I can not delete all of them.
HTML:
<div class="row newRow">
<div class="form-group fields col-sm-2 col-xs-4">
<label>ROLE *</label>
<select name="role" class="form-control1 drop2" required ng-model="model.role" placeholder="select">
<option value='' disabled selected>Select</option>
<option ng-repeat="item in role track by $index" value="{{item}}">{{item}}</option>
</select>
</div>
<div class="form-group col-sm-2 col-xs-4">
<button ng-click="AddRole($index)">Click to Add your Role</button>
</div>
</div>
<div ng-if="rolesAdded" class="col-sm-12 col-xs-12">
<span class="tag label tagStyle newStyling" alue="data" ng-repeat="data in multiRoles track by $index">
<span>{{data}}</span>
<a><i ng-click="removeSelection()"class="remove glyphicon glyphicon-remove-sign "></i></a>
</span>
</div>
JS:
$scope.AddRole = function(index) {
debugger;
if ($scope.model.role !== undefined) {
$scope.multiRoles.push($scope.model.role);
var index = $scope.role.indexOf($scope.model.role); //just find the right index which is the selected option in dropdown.
$scope.role.splice(index, 1);
console.log($scope.role);
$scope.model.role = $scope.role[0];
}
$scope.rolesAdded = true;
};
$scope.removeRoles = function(index) {
debugger;
if ($scope.multiRoles !== null) {
$scope.multiRoles.splice(index, 1);
}
};

Answer 1

In your html import data to your removeRoles(data) function:
<button ng-click="removeRoles(data)">
<i class="remove glyphicon glyphicon-remove-sign"></i>
</button>
In your controller:
$scope.removeSelection = function(data) {
$scope.multiRoles.splice($scope.multiRoles.indexOf(data), 1);
$scope.role.push(data);
$scope.rolesAdded = $scope.multiRoles.length === 0 ? false : true;
};
Code here. Hope this helps.