javascript - get a field value of an object in ng-options and filter other -

i have create 2 lists.

1)contains service names

2)contains product names assigned service names

there ids match products on assigmented services.

app.controller('loadproductservicesctrl',function($scope){      $scope.services = [          {"serviceid": 1, "servicename": "Τηλεπικοινωνίες"},          {"serviceid": 2, "servicename": "Ενέργεια"},          {"serviceid": 3, "servicename": "Ιδιωτική Ασφάλεια Υγείας"}      ];        $scope.products = [          {              "productid": 9,              "serviceid": 1,              "servicename": "Τηλεπικοινωνίες",              "productname": "business 500",              "productprofit": 40,              "producttooltip":""          },          {              "productid": 10,              "serviceid": 2,              "servicename": "Τηλεπικοινωνίες",              "productname": "business 1000",              "productprofit": 50,              "producttooltip": ""          },          {               "productid": 11,              "serviceid": 3,              "servicename": "Τηλεπικοινωνίες",              "productname": "business w",              "productprofit": 75,              "producttooltip": ""          }      ];  });

<div class="form-group">    <label for="selectpicker" class="margin-r-5 form-label">select service</label>    <select data-ng-model="myservice" data-ng-options="service service.servicename service in services" class="selectpicker services">        <option value="">select service</option>                    </select>   </div>    <div class="form-group products">    <div class="checkbox checkbox-primary checkbox-inline" ng-repeat="x in products">      <input type="checkbox" id="{{ x.productid }}" value="option1">      <label for="{{ x.productid }}"> {{ x.productname }} </label>    </div>  </div>

i want filter products service id selected. tryed use ng-model on select element, didnt works. advices?

you should

ng-repeat="x in products|filter:{serviceid:myservice.serviceid}"

running snippet

var app = angular.module('app', []);    app.controller('loadproductservicesctrl', function($scope) {    $scope.services = [{      "serviceid": 1,      "servicename": "Τηλεπικοινωνίες"    }, {      "serviceid": 2,      "servicename": "Ενέργεια"    }, {      "serviceid": 3,      "servicename": "Ιδιωτική Ασφάλεια Υγείας"    }];    $scope.products = [{      "productid": 9,      "serviceid": 1,      "servicename": "Τηλεπικοινωνίες",      "productname": "business 500",      "productprofit": 40,      "producttooltip": ""    }, {      "productid": 10,      "serviceid": 2,      "servicename": "Τηλεπικοινωνίες",      "productname": "business 1000",      "productprofit": 50,      "producttooltip": ""    }, {      "productid": 11,      "serviceid": 3,      "servicename": "Τηλεπικοινωνίες",      "productname": "business w",      "productprofit": 75,      "producttooltip": ""    }];  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div ng-app="app" ng-controller="loadproductservicesctrl">    <div class="form-group">      <label for="selectpicker" class="margin-r-5 form-label">select service</label>      <select data-ng-model="myservice" data-ng-options="service service.servicename service in services track service.serviceid" class="selectpicker services">        <option value="">select service</option>        </select>    </div>   selected id : {{ myservice.serviceid}}    <div class="form-group products" ng-repeat="x in products|filter:{serviceid:myservice.serviceid}">      <div class="checkbox checkbox-primary checkbox-inline">        <input type="checkbox" id="{{ x.productid }}" value="option1">        <label for="{{ x.productid }}">{{x.productname}}</label>      </div>    </div>  </div>