javascript - Show html elements based on object property in Angular JS -

this code showing simple drop down list

var products = [     {         "id": 1,         "name": "product 1",         "price": 2200,         "category": "c1"      },     {         "id": 1,         "name": "product 2",         "price": 2200,         "category": "c2"     },     {         "id": 1,         "name": "product 3",         "price": 2200,         "category": "c1"     },     {         "id": 1,         "name": "product 4",         "price": 2200,         "category": "c3"     },     {         "id": 1,         "name": "product 5",         "price": 2200,         "category": "c3"     } ];  <div ng-repeat="product in products" class="dropdown">   <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">select   <span class="caret"></span></button>   <ul class="dropdown-menu">     <li ng-repeat="product in products"><a href="#">{{product.name}}</a></li>   </ul> </div> 

i want show drop down list based on category, if there 3 categories in object want 3 drop down list products showing inside drop down list if 2 category 2 drop down lists , on.

can me how achieve this? new angular.

thank

the tip in comments other question helpful.

you mentioned library $scope.categories = $filter('groupby')($scope.products, 'category') in controller or ng-repeat="(group, cat) in ( products | groupby : 'category')" in markup.

please have @ demo below or in fiddle.

angular.module('demoapp', ['ui.bootstrap', 'angular.filter'])      .controller('maincontroller', function ($scope, $filter) {      $scope.products = [{          "id": 1,              "name": "product 1",              "price": 2200,              "category": "c1"        }, {          "id": 2,              "name": "product 2",              "price": 2200,              "category": "c2"      }, {          "id": 3,              "name": "product 3",              "price": 2200,              "category": "c1"      }, {          "id": 4,              "name": "product 4",              "price": 2200,              "category": "c3"      }, {          "id": 5,              "name": "product 5",              "price": 2200,              "category": "c3"      }];        $scope.categories = $filter('groupby')($scope.products, 'category');      console.log($scope.categories);  });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.js"></script>  <script src="https://cdn.rawgit.com/a8m/angular-filter/master/dist/angular-filter.js"></script>    <div ng-app="demoapp" ng-controller="maincontroller">      <div class="dropdown" dropdown>          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" dropdown-toggle>select products<span class="caret"></span>          </button>          <ul class="dropdown-menu">              <li  ng-repeat="product in products"><a href="#">{{product.name}}</a></li>          </ul>      </div>      <div dropdown>          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" dropdown-toggle>select category<span class="caret"></span>          </button>          <ul class="dropdown-menu">              <li ng-repeat="(group, cat) in categories">              <!--{{group}}              {{cat}}-->                  <strong>category: {{group}}</strong>              <a href="#" ng-repeat="item in cat">{{item.name}}</a>          </li>          </ul>      </div>  </div>