<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js@1.3.7" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mainController">
<select class="form-control" data-ng-model="class.vClass">
<option value="">All Classes</option>
<option value="1">Class I</option>
<option value="2">Class II</option>
<option value="3">Class III</option>
</select>
<select class="form-control" data-ng-model="type">
<option value="">All Types</option>
<option value="vt">transitive</option>
<option value="v.i.">intransitive</option>
<option value="vv">both</option>
</select>
<p ng-repeat="item in verbs | filter:class | filter:type " >
<strong>{{item.name}}</strong> -- CLASS {{item.vClass}} <br/>
{{item.vType1}} // {{item.vType2}} // {{item.vType3}}
</p>
</body>
</html>
var app = angular.module('app', []);
app.controller('mainController', function ($scope, $location) {
$scope.verbs = [
{
id: 1,
name:"Agaru",
vClass:1,
vType1:"v.i."
},{
id: 2,
name:"Ageru",
vClass:2,
vType1:"vt"
},{
id: 3,
name:"Akeru",
vClass:2,
vType1:"vt",
vType2:"vv",
vType3:"v.i."
},{
id: 4,
name:"Akirameru",
vClass:2,
vType1:"vt"
},{
id: 5,
name:"Akiru",
vClass:3,
vType1:"v.i."
},{
id: 6,
name:"Aku",
vClass:1,
vType1:"v.i.",
vType2:"v.i."
},{
id: 7,
name:"Arasou",
vClass:1,
vType1:"vt"
},{
id: 8,
name:"Arau",
vClass:3,
vType1:"vt"
},{
id: 9,
name:"Arawareru",
vClass:2,
vType1:"v.i.",
vType2:"v.i.",
vType3:"vv"
}
];
});
/* Styles go here */