<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="Ctrl as vm">
<p>Selected value: {{vm.SelectedValue}}</p>
<p>Filtered tags: {{vm.FilteredTags}}</p>
<select
ng-model="vm.SelectedValue"
ng-options="kv.id as kv.name for kv in vm.Types"
ng-change="vm.FilteredTags = vm.Tags.filter(x => x.type == vm.SelectedValue)" style="width: 100%">
<option></option>
</select>
</div>
</body>
</html>
let app = angular.module('app', []);
app.controller("Ctrl", function() {
this.Types = [{
"id": "1",
"name": "Type 1"
}, {
"id": "2",
"name": "Type 2"
}, {
"id": "3",
"name": "Type 3"
}];
this.Tags = [{
"id": "random1",
"type": "1",
"value": "Tag 1"
},
{
"id": "random2",
"type": "1",
"value": "Tag 2"
},
{
"id": "random3",
"type": "2",
"value": "Tag 3"
}];
})
/* Styles go here */