ng-repeat with chips in angular material - angularjs

Question

I'm trying to use md-chips to collect input from user with auto-complete. For ex: price,available,Y,N. where each component will be rendered in chips.There will be multiple inputs from user per line. When i submit the form i need all the chips per line entered by user. This is where i'm facing the problem.
<div ng-repeat ="rule in rules">
<md-chips ng-model="selectedHeaders">
<md-chip-template>
{{$chip}}
</md-chip-template>
</md-chips>
</div>
the above code works as my model is just selectheader and in js it's
$scope.selectedHeaders = [];
how should i use it to for rule.selectheader??. If i change my model to rule.selectheader , it throws this below error
Cannot set property 'selectedHeaders' of undefined.
Any pointers to solve this issue will be much apppreciated. If issue is not clear, please ask

Answer 1

Have you defined rules values?
In js, at least the value of rules must be something like this
var rules = [{
selectedHeaders: ['Apple', 'Orange']
}, {
selectedHeaders: ['Banana']
}];

Answer 2

you can do like below
Js code
var app = angular.module('myApp', []);
app.controller('ctrl1', function($scope) {
$scope.rules = [{
name: 'rule1',
id: 1
}, {
name: 'rule2',
id: 2
}];
$scope.data = {};
});
HTML
<div ng-app='myApp'>
<div ng-controller='ctrl1'>
<div ng-repeat="rule in rules">
<md-chips ng-model="data.selectedHeaders">
<md-chip-template>
{{$chip}}
<!-- for testing-->{{rule}}
</md-chip-template>
</md-chips>
</div>
</div>
</div>
Here is the link Jsfiddle demo