angular.js

angular.module('gridtest', [
    'ui.router',
    'ngAnimate',
    'ngTouch',
    'ui.grid',
    'ui.grid.edit',
    'ui.grid.selection',
    'ui.grid.moveColumns',
    'ui.bootstrap',
    'ui.router'
])
    .config(function($stateProvider, $urlRouterProvider, $locationProvider) {

        $stateProvider
            .state("home", {
                url: "/",
                templateUrl: "/views/home.html",
                controller: "GridCtrl",
                resolve: {
                    testcases: function() {
                        return {
                            "Flow1": [
                                {
                                    "policy": "1234",
                                    "pre-flow": "Pending",
                                    "post-flow": "Active"
                                },
                                {
                                    "policy": "2345",
                                    "pre-flow": "Active",
                                    "post-flow": "Disability"
                                },
                                {
                                    "policy": "3456",
                                    "pre-flow": "Disability",
                                    "post-flow": "Active"
                                }
                            ]
                        }
                    }
                }
            });

        $urlRouterProvider.otherwise("home");
        $locationProvider.html5Mode(true);


    })
    .controller('GridCtrl', function($scope, $window, $modal, $log, $interval, testcases) {

        $scope.testcases = testcases;

        $scope.columns = [];

        $scope.gridOptions = {
            enableSorting: true,
            enableCellEditOnFocus: true,
            enableGridMenu: false,
            columnDefs: function() {
                _.forOwn($scope.testcases.Flow1[0], function(value, key) {
                    $scope.columns.push({field: key});
                });
            },
            data: $scope.testcases.Flow1
        };



        //$scope.gridOptions.data =

        $scope.newColumn = {};
        $scope.newCondition = {};

        $scope.addRow = function() {
            var newRow = {};
            _.forOwn($scope.gridOptions.data[0], function(value, key) {
                newRow[key] = "";
            });
            console.log(newRow);
            $scope.gridOptions.data.push(newRow);
            console.log($scope.gridOptions.data);
        };

        $scope.removeRow = function() {
            $scope.gridOptions.data.pop();
        };

        $scope.addColumn = function() {
            //$scope.columns.push({ field: $scope.newColumn.name, enableSorting: false });
            $scope.gridOptions.columnDefs.push({ field: $scope.newColumn.name, enableSorting: true });

            _.forOwn($scope.testcases, function(value, key) {
                console.log(key);
                if (value.length > 0) {
                    _.each(value, function(testcase) {
                        testcase[$scope.newColumn.name] = "";
                    });
                }
            });

            console.log($scope.testcases);
        };

        $scope.addCondition = function() {
            // how to update ui-grid columns when new column is added
            $scope.gridOptions.columnDefs.push({ field: "Pre-Flow: " + $scope.newCondition.name, enableSorting: true });
            $scope.gridOptions.columnDefs.push({ field: "Post-Flow: " + $scope.newCondition.name, enableSorting: true });


            _.forOwn($scope.testcases, function(value, key) {
                console.log(key);
                if (value.length > 0) {
                    _.each(value, function(testcase) {
                        testcase["pre-" + $scope.newCondition.name] = "";
                        testcase["post-" + $scope.newCondition.name] = "";
                    });
                }
            });

            console.log($scope.testcases);

        };

        $scope.addFlowTab = function() {
            var n = $scope.tabs.length + 1;
            $scope.tabs.push({title: "Flow " + n, content: "Grid " + n});

            var previousFlow = $scope.testcases["Flow"+(n-1)];
            $scope.testcases["Flow"+n] = previousFlow;

            console.log($scope.testcases);
        };

        $scope.removeFlowTab = function() { return;};


        $scope.tabs = [
            { title:'Flow 1', content:'Grid 1' }
        ];

        $scope.getTabTestcases = function(tab) {
            console.log("tab selected, now load its data");
            console.log(tab.title);
            console.log($scope.testcases);
            var tab = _.trim(tab.title);
            console.log(tab);
            //$scope.gridOptions.data = $scope.testcases[tab.title];

        };

    });

data.json

{
    "Cards": [
            {
                "title": "Maximumm Benefits",
                "id": 515329,
                "scenarios": [
                    {
                        "id":1,
                        "name": "AV is reduced by each rider charge for each LTC coverage",
                        "testcases": [
                            {
                                "flow1": [
                                    {
                                        "policy": "1234",
                                        "pre-flow": "FinalAct",
                                        "post-flow": "Active"
                                    },
                                    {
                                        "policy": "2345",
                                        "pre-flow": "FinalAct",
                                        "post-flow": "Active"
                                    },
                                    {
                                        "policy": "3456",
                                        "pre-flow": "FinalAct",
                                        "post-flow": "Active"
                                    }
                                ],
                                "flow2": [
                                    {
                                        "policy": "1234",
                                        "pre-flow": "FinalAct",
                                        "post-flow": "Active"
                                    },
                                    {
                                        "policy": "2345",
                                        "pre-flow": "FinalAct",
                                        "post-flow": "Active"
                                    },
                                    {
                                        "policy": "3456",
                                        "pre-flow": "FinalAct",
                                        "post-flow": "Active"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },
            {
                "title": "Relationship",
                "id": 515319,
                "scenarios": [{}]
            },
            {
                "title": "Minimum and Restrict Transactions",
                "id": 515328,
                "scenarios": [{}]
            }
        ]
}

notes

grid
  remove column


grid data
  get data - ui-router call
  p/o data - sort data on object
  save data - to api database


tabs
  add/remove tabs
  display grid