<!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 */