Как показать / скрыть столбец на основе выбранного элемента

Question

У меня есть два блока, которые позволяют пользователю выбирать элемент между левым и правым. Кроме того, в нижней части блока есть еще один столбец с 1 строкой. То, что я пытаюсь сделать, это то, что столбец скрыт по умолчанию, он покажет пользователю, если выбран элемент слева направо блока. И скрыть снова, если пользователь выбрал тот же элемент справа налево.

введите описание изображения здесь

JS

data = 0: {id: 1, name: "Admin"},1: {id: 2, name: "Staff"}
$scope.roles = data;
angular.forEach($scope.roles, function (r) {
    if (r.name == 'Sales') {
        $scope.sale_role_id = r.id;
    }
    if (r.name == 'Admin') {
        $scope.admin_role_id = r.id;
    }
});
$scope.show_dd_col = false;


angular.forEach($scope.item.role, function (r) {
    if (r == $scope.admin_role_id || 
     r.includes($scope.admin_role_id)) {
        return $scope.isAdmin = true;
    } else {
        $scope.isAdmin = false;
    }
    return $scope.isAdmin;
})

if($scope.isAdmin === true) {
    $scope.show_dd_col = true;
} else {
    $scope.show_dd_col = false;
}

HTML

// выберите блок элементов

<formfield label="@lang('user.role')" label-class="col-sm-3"
          input- class="col-sm-9">
    <select ng-model="item.role" name="role"
            ng-options="role.id as role.name for role in roles"
            opt="roles" required multiple="multiple">
    </select>
</formfield>

// показать и скрыть столбец

<formfield ng-show="show_dd_col" 
           label="@lang('settings.individual_email')" 
           label-class="col-sm-3" input- class="col-sm-9">
    <select name="user_default_individual_email"
            ng-model="item.individual_email" convert-to-number>
        <option value="1">@lang('app.yes')</option>
        <option value="0">@lang('app.no')</option>
    </select>
</formfield>