Angular js dynamically add column to ui grid

Question

hi, I am developing an angular js application in which I use angular ui-grid to display the data binding coming from the mvc controller. But after I bind the data to the ui-grid, I want to add an additional column to the grid with buttons on each row dynamically. I do not know how to do that. Any help would be appreciated ..

code: Here, columnDefs will be bound to the http service method, which will invoke the mvc controll action and bind the response. I want to add a new column now.That will have buttons for each row. Are there any array bindings to the columnDefs field

    $scope.gridOptions = {
            enableColumnsResize: true,
            enableSorting: false,
            enableFiltering: false,
            autoResize: true,
            enableFocusedCellEdit: true,
            enableCellSelection: true,
            enableCellEditOnFocus: true,
            enableColumnMenus: false,
            columnDefs: [

            ],
            data:$scope.swap,
            onRegisterApi: function (gridApi) {
                $scope.grid1Api = gridApi;
            }

        };
$http.get('/Default1/GetJsonData')
            .success(function (result) {
                $scope.swap = result;
                $scope.gridOptions.push({name:'newcol',filter:'newcolarray'})

                $scope.gridOptions.data = $scope.swap;
                console.log(result);
            })
            .error(function (data) {
                console.log(data);
            });

Answer 1

success() :

$scope.gridOptions.columnDefs.push({name: 'newCol', displayName: 'My new col'});

, , , $scope.gridOptions.data