title: How to display new brand in new line
body: <p>This is my css and HTML template file.</p>
  
  <pre><code>#wrapper {
    display: inline!important;
    height: 275px;
    max-width: 540px;
  }
  .box {
    margin: 5px;
    display: inline-block;
    width: 170px;
    height: 275px!important;
    background-color: #F5FBEF;
    text-align: center;
    float: left;
  }
  .ng-repeat {
    display: inline-block;
  }
  </code></pre>
  
  <p>HTML File</p>
  
  <pre><code>&lt;br&gt;
  &lt;div&gt;
      &lt;div ng-if="SearchText.length&lt;3" ng-repeat="product in pc.ProductService.Products  | filter:FilterExpr:true |orderBy:['SubCategoryName','BrandName'] | groupBy:['BrandName']" &gt;
              &lt;div ng-show="product.group_by_CHANGED"&gt;&lt;h2&gt;{{product.BrandName}} &lt;/h2&gt;&lt;/div&gt;
              &lt;div id=wrapper&gt;
              &lt;div class='box'&gt;
                  &lt;ng-include src="'commonTemplate.html'"&gt;&lt;/ng-include&gt;
              &lt;/div&gt;
              &lt;/div&gt;
      &lt;/div&gt;  
  
  
  
      &lt;!-- template (common piece of code) --&gt;
      &lt;script type="text/ng-template" id="commonTemplate.html"&gt;
          &lt;div class="BrandName"&gt; &lt;b&gt;{{product.BrandName}}&lt;/b&gt; &lt;/div&gt;
          &lt;div class="ProductName"&gt; {{product.ProductName}} &lt;/div&gt;
          &lt;br&gt;
          &lt;div&gt; &lt;img src="http://localhost/{{ product.ProductImagePath }}" alt="" border=3 height=75 width=75&gt;&lt;/img&gt; &lt;/div&gt;
          &lt;div class="ProductVariants"&gt; 
              &lt;select class="form-control btn btn-default btn-xs text-center" ng-init="SelectedVariant = product.Variants[0]" ng-model="SelectedVariant" ng-options="variant.VariantName for variant in product.Variants" ng-change="ChangeVariant(product.ProductID, SelectedVariant.VariantID)"&gt;&lt;/select&gt;
          &lt;/div&gt;
  
          &lt;div class="Price"&gt; 
              &lt;strike&gt; {{SelectedVariant.MRP}} &lt;/strike&gt; &amp;nbsp; {{SelectedVariant.SellPrice}} 
          &lt;/div&gt;      
  
          &lt;div class="AddToCart" ng-if="SelectedVariant.InCart==0"&gt;
              &lt;a class="btn btn-success btn-sm" ng-click="pc.AddToCart(product.ProductID, SelectedVariant.VariantID)"&gt;Add to Cart &amp;nbsp;
                  &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt; 
              &lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div class="AddToCart" ng-if="SelectedVariant.InCart&gt;0"&gt;
  
              &lt;a class="btn btn-default btn-xs" ng-click="pc.PlusItem(product.ProductID, SelectedVariant.VariantID)"&gt;
                  &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt; 
              &lt;/a&gt;
  
              &lt;button type="button" class="btn btn-sm btn-info disabled"&gt;{{SelectedVariant.InCart}} in cart&lt;/button&gt;
  
  
              &lt;a class="btn btn-default btn-xs" ng-click="pc.MinusItem(product.ProductID, SelectedVariant.VariantID)"&gt;
                  &lt;span class="glyphicon glyphicon-minus"&gt;&lt;/span&gt; 
              &lt;/a&gt;
          &lt;/div&gt;
  
      &lt;/script&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>This is how my page looks like-</p>
  
  <p><a href="https://i.stack.imgur.com/ABfJM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ABfJM.png" alt="enter image description here"></a></p>
  
  <p>What i want when new brand comes say annapurna or panchratan, display that in new line. and then in next line display all the products of that brand.
  (similar to aashirvad first brand.)
  How to do that?</p>