Угловой JS, помните статус флажка при фильтрации

Question

Я пытаюсь создать список с флажками с полем поиска.

HTML

<div ng-controller="MainCtrl"> 
    <input type="text" placeholder="Search" ng-model="query"> 
    <div ng-repeat="item in items | filter:query"> 
     <input type="checkbox" id="{{item.id}}" value="{{item.id}}">{{item.name}} 
    </div> 
    </div> 

JS

myApp.controller('MainCtrl', function ($scope) { 
    $scope.items = [ 
    { 
     "id": 1, 
     "name": "Green", 
    }, 
    { 
     "id": 2, 
     "name": "Yellow", 
    }, 
    { 
     "id": 3, 
     "name": "Blue", 
    }, 
    { 
     "id": 4, 
     "name": "Red", 
    } 
    ]; 
}); 

Проблема заключается в том, что состояние флажков не сохраняются, когда я в поиске через поле поиска. Например, когда я проверяю «Зеленый», я набираю текстовое поле что-то еще, а затем удаляю этот текст, отмеченный «Зеленый» больше не проверяется. Как я могу получить «память» в статусе флажков?

Вот ссылка на plunker: http://plnkr.co/edit/KHq3AA4guGKA4AqxQrF8

Answer 1

Я предложил, чтобы Вы, чтобы добавить еще одно свойство в вашем items массиве каждый item, который будет доступен как item.checked

Markup

<div ng-controller="MainCtrl"> 
    <input type="text" placeholder="Search" ng-model="query"> 
    <div ng-repeat="item in items | filter:query"> 
     <input type="checkbox" ng-model="item.checked">{{item.name}} 
    </div> 
    </div> 

Working Plunkr

Answer 2

прикрепить ng-model="item.checked" к CheckBox как:

<input type="checkbox" ng-model="item.checked" id="{{item.id}}" value="{{item.id}}">{{item.name}} 

plunker посмотреть