AngularJS doesn't work with 'multiple' flag - angularjs

Question

I'm trying to filter some data from the select box. It works fine when I don't use the "multiple" flag. However, the idea here is to be able to select multiple environments and multiple applications and show it based the options I selected, but it is not working. I tried in many different ways, but I didn't find what I'm missing. Can someone help me here?
Here are the files which I'm using.
monitoring.html
<div ng-controller="monitoring" class="md-padding selectdemoOptionGroups" ng-cloak="" ng-app="monitor">
<div>
<h1 class="md-title">Monitoring</h1>
<div layout="row">
<md-input-container style="margin-right: 10px;">
<label>Segments</label>
<md-select ng-model="segment" >
<md-option ng-repeat="segment in segments" value="{{segment}}">{{segment}}</md-option>
</md-select>
</md-input-container>
<md-input-container>
<label>Environments</label>
<md-select ng-model="selectedEnvironments" multiple>
<md-optgroup label="environments">
<md-option ng-value="environment.name" ng-repeat="environment in environments | filter: {category: 'env' }">{{environment.name}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
<md-input-container>
<label>Applications</label>
<md-select ng-model="selectedApplications" multiple="">
<md-optgroup label="application">
<md-option ng-value="application.name" ng-repeat="application in applications | filter: {category: 'app' } ">{{application.name}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
<button ng-click="clear()" style="width: 55px; height: 50px;" id="iconTextButton">Clear</button>
<button style="width: 55px; height: 50px;" id="iconTextButton">Run</button>
</div>
<div class="md-card container-shadow" style="margin:15px">
<div class="card-header4">
Monitoring page1 for {{segment}}
</div>
<table id="grid422">
<colgroup>
<col style="width:830px" />
<col style="width:130px" />
<col style="width:130px" />
<col style="width:130px" />
</colgroup>
<thead align="left">
<tr>
<th >Application</th>
<th>Environment</th>
<th >StatusUP</th>
<th>StatusDown</th>
</tr>
</thead>
<tbody align="left" >
<tr ng-repeat="todo in todos | filter:segment | filter:selectedEnvironments | orderBy: 'application' ">
<td>{{todo.application}}</td>
<td>{{todo.environment}}</td>
<td>{{todo.statusUp}}</td>
<td>{{todo.statusDown}}<td>
</tr>
</tbody>
</table>
</div></div>
monitoring.js
(function (angular) {
angular
.module('monitor')
.controller('monitoring', function ($scope, $http) {
$scope.segments = [
"SegmentA",
"SegmentB",
"SegmentC"
];
$scope.selectedSegments = [];
$scope.printSelectedSegments = function printSelectedSegments() {
return this.selectedSegments.join('');
};
$scope.environments = [
{ category: 'env', name: 'ENV1' },
{ category: 'env', name: 'ENV2' },
{ category: 'env', name: 'ENV3' },
{ category: 'env', name: 'ENV4' }
];
$scope.selectedEnvironments = [];
$scope.printSelectedEnvironments = function printSelectedEnvironments() {
var numberOfEnvironments = this.selectedEnvironments.length;
if (numberOfEnvironments > 1) {
var needsOxfordComma = numberOfEnvironments > 2;
var lastEnvironmentConjunction = (needsOxfordComma ? ',' : '') + ' and ';
var lastEnvironment = lastEnvironmentConjunction +
this.selectedEnvironments[this.selectedEnvironments.length - 1];
return this.selectedEnvironments.slice(0, -1).join(', ') + lastEnvironment;
}
return this.selectedEnvironments.join('');
};
$scope.applications = [
{ category: 'app', name: 'App1' },
{ category: 'app', name: 'App2' },
{ category: 'app', name: 'App3' },
{ category: 'app', name: 'App4' }
];
$scope.selectedApplications = [];
$scope.printSelectedApplications = function printSelectedApplications() {
var numberOfApplications = this.selectedApplications.length;
if (numberOfApplications > 1) {
var needsOxfordComma = numberOfApplications > 2;
var lastApplicationConjunction = (needsOxfordComma ? ',' : '') + ' and ';
var lastApplication = lastApplicationConjunction +
this.selectedApplications[this.selectedApplications.length - 1];
return this.selectedApplications.slice(0, -1).join(', ') + lastApplication;
}
return this.selectedApplications.join('');
};
$scope.todos = [
{"segment":"SegmentA","application":"App1","environment":"ENV1","statusUp":57,"statusDown":"13"},{"segment":"SegmentB","application":"App2","environment":"ENV2","statusUp":12,"statusDown":"33"},{"segment":"SegmentC","application":"App3","environment":"ENV4","statusUp":357,"statusDown":"133"},{"segment":"SegmentA","application":"App1","environment":"ENV1","statusUp":57,"statusDown":"13"},{"segment":"SegmentB","application":"App2","environment":"ENV1","statusUp":12,"statusDown":"33"},{"segment":"SegmentC","application":"App3","environment":"ENV3","statusUp":333,"statusDown":"213"},{"segment":"SegmentB","application":"App1","environment":"ENV4","statusUp":357,"statusDown":"133"},{"segment":"SegmentC","application":"App2","environment":"ENV2","statusUp":57,"statusDown":"13"}
];
});
})(angular);

Answer 1

You can create custom function for filter
Updated code
<tbody align="left">
<tr ng-repeat="todo in todos | **filter: filterByGenres** | orderBy: 'application' ">
<td>{{todo.application}}</td>
<td>{{todo.environment}}</td>
<td>{{todo.statusUp}}</td>
<td>{{todo.statusDown}}
<td>
</tr>
angular controller side code
(function(angular) {
angular
.module('plunker', ['ngMaterial'])
.controller('monitoring', function($scope, $http) {
**$scope.filterByGenres = function(ele) {
var res = true
if ($scope.selectedEnvironments !== null && $scope.selectedEnvironments.length > 0) {
if ($scope.selectedEnvironments.indexOf(ele.environment) == -1) {
res = false;
}
}
if ($scope.selectedApplications !== null && $scope.selectedApplications.length > 0) {
if ($scope.selectedApplications.indexOf(ele.application) == -1) {
res = false;
}
}
return res;
}**
$scope.segments = [
"SegmentA",
"SegmentB",
"SegmentC"
];
...
Plunker here
Thanks

Answer 2

I just run your source on codepen.io and nothing output, try included md then everything ok. So, please try use .module('monitor', ['ngMaterial']) and test again.