Stackoverflow | AngularJS Filter Select array ... Filtering options for select based on another object's state ...

<!doctype html>
<html ng-app="demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
    <script src="app.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  </head>
  <body class="container-fluid">
    <div class="container">
  
      <h3>Function as filter, filtering each items ...</h3>
      <div class="row">
        <pre>ng-options="opt.name for opt in _items | filter:_filters.selectableItems(_transaction.location)"</pre>
      </div>
      <div class="row" ng-controller="demoController">
        <div class="col-xs-6">
            <div class="row">
              Select location :
              <select class="form-control"
                      ng-model="_transaction.location"
                      ng-options="opt.name for opt in _locations"></select>
            </div>
            <div class="row">
              Select item :
              <select class="form-control"
                      ng-model="_transaction.item"
                      ng-options="opt.name for opt in _items | filter:_filters.selectableItems(_transaction.location)"></select>
            </div>
        </div>
        
        <div class="col-xs-6">
           <pre>option = {{_transaction | json}}</pre>
        </div>
      </div>

      <hr>
  
        <h3>Custom filter, filtering collection ...</h3>
        <div class="row">
          <pre>ng-options="opt.name for opt in _items | withLocation:_transaction.location"</pre>
        </div>
      <div class="row" ng-controller="demoController">
      <div class="col-xs-6">
          <div class="row">
            Select location :
            <select class="form-control"
                    ng-model="_transaction.location"
                    ng-options="opt.name for opt in _locations"></select>
          </div>
          <div class="row">
            Select item :
            <select class="form-control"
                    ng-model="_transaction.item"
                    ng-options="opt.name for opt in _items | withLocation:_transaction.location"></select>
          </div>
      </div>
      
      <div class="col-xs-6">
         <pre>option = {{_transaction | json}}</pre>
      </div>
    </div>

  </div>
  </body>
</html>


angular.module('demo', ['ngAnimate', 'ui.bootstrap']);

// filter items collection by location
angular.module('demo').filter('withLocation', function () {
  return function (items, selectedLocation) {
    	function isLocationInLocations (elem) { return selectedLocation && elem.location_id === selectedLocation.id; }
			function itemHasLocation (elm){ return (elm.locations && elm.locations.filter(isLocationInLocations).length > 0); }
			return items.filter(itemHasLocation);
  };
});

angular.module('demo').controller('demoController', function($scope, $log) {

	var vm = $scope;

	vm._locations = [{
		id: 'd8a299a3-7f4b-4d32-884f-efe25af3b4d1',
		name: 'Location 1'
	}, {
		id: 'd8a299a3-7f4b-4d32-884f-efe25af3b4d2',
		name: 'Location 2'
	}, {
		id: 'd8a299a3-7f4b-4d32-884f-efe25af3b4d3',
		name: 'Location 3'
	}, {
		id: 'd8a299a3-7f4b-4d32-884f-efe25af3b4d5',
		name: 'Location 5'
	}];
	
	vm._items = [{
		"id": "9f582e58-45dd-4341-97a6-82fe637d769e",
		"name": "20oz Soft Drink Cup 1+2",
		"locations": [{
			"inventory_id": "9d5aa667-4a64-4317-a890-9b9291799b11",
			"location_id": "d8a299a3-7f4b-4d32-884f-efe25af3b4d1"
		}, {
			"inventory_id": "9d5aa667-4a64-4317-a890-9b9291799b11",
			"location_id": "d8a299a3-7f4b-4d32-884f-efe25af3b4d2"
		}],
	}, {
		"id": "9f582e58-45dd-4341-97a6-82fe637d769e",
		"name": "Corner waffle and coffee cafe 5+2",
		"locations": [{
			"inventory_id": "9d5aa667-4a64-4317-a890-9b9291799b11",
			"location_id": "d8a299a3-7f4b-4d32-884f-efe25af3b4d5"
		}, {
			"inventory_id": "9d5aa667-4a64-4317-a890-9b9291799b11",
			"location_id": "d8a299a3-7f4b-4d32-884f-efe25af3b4d2"
		}],
	}, {
		"id": "9f582e58-45dd-4341-97a6-82fe637d769e",
		"name": "Corner waffle and coffee cafe 3",
		"locations": [{
			"inventory_id": "9d5aa667-4a64-4317-a890-9b9291799b11",
			"location_id": "d8a299a3-7f4b-4d32-884f-efe25af3b4d9"
		}, {
			"inventory_id": "9d5aa667-4a64-4317-a890-9b9291799b11",
			"location_id": "d8a299a3-7f4b-4d32-884f-efe25af3b4d3"
		}],
	}];

	vm._transaction = {};

	vm._filters = {};
	
	// filter function to check if option can be rendered ....
	vm._filters.selectableItems = function(selectedLocation) {
		return function(item) {
			var locationsHasLocation = function(elem) { return selectedLocation && elem.location_id === selectedLocation.id; }
			return (item.locations && item.locations.filter(locationsHasLocation).length > 0);
		}
	}
	
});


pre{
  height:auto;
  max-height: 200px;
}

Stackoverflow | AngularJS Filter Select array ...

Filtering options for select based on another object's state ...

Link : http://stackoverflow.com/questions/33306267/angularjs-filter-select-array
Helper Reference: http://toddmotto.com/everything-about-custom-filters-in-angular-js/