What's the smartest way to interact with an array in a controller (dynamically)?

Question

Angular

Hello everyone, I have the task of creating a grid and changing the block classes in it.
We have an array in the controller:

$scope.gridList = [
  { 'row': [{
    "lg":"4",
    "md":"4",
    "sm":"6",
    "xs":"12"
  },{'row': {....}]
   }]

so we store information about the sizes, there is a certain block (directive) that changes the parameters {lg,md,sm,xs} and affects the output elements, everything is fine, but as when changing the display (such as displaying col-md-* classes), take from gridList def. meaning. I have no idea how best to do this, tell me how to be?
Switches:
by ng-click, we go to the rules template, it contains the identifier and prefix {lg,md,sm,xs}, we name it as classV

$scope.switchOp = function (idV, classV) {
  $scope.stilic.classView = classV; // заносим в спец блочек
// собираем нужный класс
$scope.menegerClass = 'col-'+classV+'-'+$scope[0].classV;
}

Of course $scope[0].classV; gives an error, how best to refer to it, maybe put a court filter somehow? O_O
the blocks themselves can be changed in width, at the moment:

$scope.plus = function(){
  if (this.item.lg >= 12) {return;}
       this.item.lg++;
};

, where .lg will again be replaced with the chosen prefix from the directive above.

Logic in a nutshell, there is a list of rules (name, id, prefix) - descope, 1, lg. if it is active, then classV takes the value - prefix, and then goes to the ng-class construction rules, but how to take the value of the selected prefix from another array with ready-made grid data in order to use it in ng-class, in forich (when displaying all grid items, ng-repeat)

Or is this all wrong?
Can you help the second option to solve the problem:
array output structure:

<section class="row" ng-repeat="list in gridList">
  <div data-ng-repeat="item in list.row">{{item.lg}}</div>
</section>

{{item.lg}} - displays "4", which function to create, so that it would access internal arrays and take lg, md, depending on the parameter passed to it

Answer 1

solution:
add ng-class="function(item) to our blocks, i.e.
now with a function, use check

$scope.getClass = function(item) {
if (item.hasOwnProperty(cp)) {
  className = 'col-' + cp + '-' +item[cp];
}
return
}

, where ' cp ' is the desired prefix, and check with an array, select a value from there and use.
Brrr... Although I still don't understand how best to interact with individual objects in multidimensional arrays, here a separate object is used with a set of prefixes and extras. properties and pull the rules from it, and check against the grid array. Maybe someone saw not a bad post about the "depths" or what is worth reading?
At the moment I'm studying Angular according to a pre-set task, to implement this and that. I saw collections of articles on the web on creating an application, increase the skill to "walk" through them?

Answer 2

DEMO .

angular.module('toster', [])

.controller('GridCtrl', function() {
    var vm = this;
    
    var grids = [
        {
            xs: '12',
            sm: '6',
            md: '4',
            lg: '4'
        },
        {
            xs: '10',
            sm: '8',
            md: '6',
            lg: '3'
        }
    ];
    
    var activeIndex = 0;
    vm.activeGrid = grids[activeIndex];
    
    vm.toggleGrid = function() {
        switch (activeIndex) {
            case 0:
                vm.activeGrid = grids[++activeIndex];
                break;
            case 1:
                vm.activeGrid = grids[--activeIndex];
                break;
        }
    };
})

.directive('dynamicGrid', function() {
    return {
        scope: {
            grid: '=dynamicGrid'
        },
        templateUrl: 'dynamicGrid.html',
        link: function(scope, elem) {
            scope.$watch('grid', function(grid) {
                var gridCss = {};
                
                angular.forEach(grid, function(value, key) {
                    gridCss['col-' + key + '-' + value] = true;
                });
                
                scope.gridCss = gridCss;
            });
        }
    };
});