JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.2.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <body ng-app="gridView" ng-controller="gridViewController">
        <div id="sliderContainer">
            Rows : <input value="2" type="range" min="2" max="4" id="rowcount"  step="1" ng-model="rows"/>
            Columns : <input value="2" type="range" min="2" max="4" id="columncount" step="1" ng-model="columns"/>
        </div>
        <div>rows : {{rows}} columns : {{columns}}</div>
        <div class="container">
          
            <div class="row" ng-repeat="i in range(1, rows)">
                <div class="chart col-xs-{{12/columns}}" ng-repeat="i in range(1, columns)">
                    col-xs-{{12/columns}}
                </div>
            </div>
          
        </div>
        </body>

CSS

body {
                text-align: center;
            }
            #sliderContainer{
                margin: 0 auto;
                width: 300px;
                height: auto;
            }
            .chart{
                background-color: #0000ff;
                border: 5px solid white;
                height: 300px;

            }
            .hidden{
                display: gone:;
            }

JavaScript

(function(angular) {
    angular.module("gridView", [])
    .controller("gridViewController", ["$scope", "$window", "$http",
        function($scope, $window, $http) {
        	$scope.rows = 2;
        	$scope.columns = 2;
            
            $scope.range = function(min, max, step){
              step = (step === undefined) ? 1 : step;
              var input = [];
                for (var i = min; i <= max; i += step) input.push(i);
                return input;
              };
           	
        }
    ]);

})(window.angular);