How do I filter an array with AngularJS and use a property of the filtered object as the ng-model attribute?

If I have an array of objects, and I want to bind the Angular model to a property of one of the elements based on a filter, how do I do that? I can explain better with a concrete example:


<!DOCTYPE html>
<html ng-app>
        <script src=""></script>
        <meta charset=utf-8 />
        <title>JS Bin</title>
    <body ng-controller="MyCtrl">
        <input ng-model="results.year">
        <input ng-model="results.subjects.title | filter:{grade:'C'}">


function MyCtrl($scope) {
  $scope.results = {


I want to filter the second input to the subject with a grade ‘C’, but I don’t want to bind the model to the grade; I want to bind it to the title of the subject that has grade ‘C’.

Is this possible, and if so, how is it done?


<div ng-repeat="subject in results.subjects | filter:{grade:'C'}">
    <input ng-model="subject.title" />

Leave a Reply

Your email address will not be published. Required fields are marked *