AngularJS processing input value - html

Question

When i start typing a name of student, like "M", the list of student needs to include only students, name of that are starting on letter "M" and so on rest of the word. But input value .length is undefined all the time.
(function() {
var app = angular.module('app', []);
app.controller('DataController', function() {
this.students = arr;
this.compare = function() {
for (var i = 0; i < this.text.length; i++) {
if (this.text[i] == this.students.name[i]) {
alert(this.text);
return true;
}
}
}
});
var arr= [{
name: 'Azurite',
price: 2.95
}, {
name: 'Bloodstone',
price: 5.95
}, {
name: 'Zircon',
price: 3.95
}];
}());
HTML
<div class="container-fluid">
<div class="row-fluid">
<input class="col-md-12 col-xs-12" type="text" placeholder="Search people by name..." ng-model='text' ng-change='data.students.name'>
<div class="buttons">
<button class="btn btn-sort">Sort by name</button>
<button class="btn btn-sort">Sort by age</button>
<button ng-click='data.click()' class="btn btn-danger">Reset</button>
</div>
</div>
<!--Main content-->
<div class="main-table col-sm-8 col-md-7 col-md-offset-1 col-lg-7 col-lg-offset-1">
<table class="table table-hover">
<thead>
<tr>
<th class="text-center">Image</th>
<th>Name</th>
<th>Age</th>
<th>Phone</th>
</tr>
</thead>
<tbody ng-repeat='student in data.students' ng-show='data.compare()'>
<tr>
<td>
<img src="/img/cat.svg" alt="">
</td>
<td>{{student.name}}</td>
<td>41</td>
<td>sieg#example.com</td>
</tr>
</tbody>
</table>
</div>
</div>

Answer 1

The angular way to do this is to use the filter feature built in to angular.
first, the text box you want to type your search into:
<input class="col-md-12 col-xs-12" type="text"
placeholder="Search people by name..." ng-model='data.text'>
Note that this only needs an ng-model value.
Next, the ng-repeat:
<tbody ng-repeat='student in data.students | filter:data.text'>
Nothing is necessary at all in the controller.
http://plnkr.co/edit/aoR2ZkrgjCvhC60Ky0QA?p=preview