title: How can I pragmatically let ng-repeat add another row when the number of columns are 4?
body: <p>Hi I need someone to help me out, the ng-repeat is getting data from a json file , and it's shown inside a div of bootstrap row class which has inside it col-sm-3 , I need to let the ng-repeat to have each 4 "col-sm-3" inside a row , and not to render all the 8 col-sm-3 after each other inside only on row , because this result in an error in the design </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var angular;
  
  angular.module("rootCave", ['ngRoute'])
  
      .service('aboutService', function ($http, $q) {
          "use strict";
          var deferred = $q.defer();
          $http.get('data/data.json').then(function (rcdata) {
              deferred.resolve(rcdata);
          });
          this.getAbout = function () {
              return deferred.promise;
          };
      })
  
      .controller('aboutCtrl', function ($scope, aboutService) {
          var promise = aboutService.getAbout();
          promise.then(function (rcdata) {
              $scope.about = rcdata.data.about;
              $scope.products = rcdata.data.products;
              $scope.mobileProduct = rcdata.data.mobileProduct;
              $scope.clients = rcdata.data.clients;
              $scope.anytime = rcdata.data.anytime;
              $scope.lobProduct = rcdata.data.lobProduct;
              $scope.Product = rcdata.data.lobProduct.projectsdetails;
          });
      })
  
      .config(function ($routeProvider) {
          $routeProvider
              .when('/lob',
                  {
                      controller: 'loburl',
                      templateUrl: 'line-of-business.php'
                  });
  
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;div class="row"&gt;
                  &lt;div class="col-sm-3 " data-ng-repeat="items in about"&gt;
                      &lt;div class="about-box"&gt;
                          &lt;img ng-src= "&lt;?php echo $img_about; ?&gt;{{items.icon}}"&gt; 
                          &lt;h3&gt;{{items.title}}&lt;/h3&gt;
                          &lt;p&gt;{{items.description}}&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
         </code></pre>
  </div>
  </div>
  </p>