<div class="container" ng-controller="ProductCtrl">
    <div class="row">
        <div class="col-md-3">
            <div class="list-group">
                <a href="#" class="list-group-item active">ACTIVE</a>

                <a href="#" class="list-group-item" ng-repeat="c in category" ng-click="load_product_by_category(c)">{{c.name}}</a>
            </div>

        </div>
        <div class="col-md-9">
            <div class="row">

                <!-- product begin -->

                <div class="col-sm-6 col-md-4" ng-repeat="pdt in product">
                    <div class="thumbnail">
                        <img src="{{pdt.Image}}" alt="">
                        <div class="caption">
                            <h3>{{pdt.Name}}</h3>
                            <p>{{pdt.Desc}}</p>
                        </div>
                    </div>
                </div>

            </div>
            <!-- product end -->

                <!-- pagination begin -->
                <nav class="pull-right">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
<!-- pagination end -->
        </div>
    </div>
</div>