angularjs - ng-repeat show subtitle for first type of item -

i have list of objects have same fields except type. show subtitle in ng-repeat right before type of item rendered. right have x ng-repeats x types of items , becoming unmanageable. blocks same except subtitle. assume scope array doesn't have types scattered, they're subdivided type. example, when rendered show this.

rendered

cats cat 1 cat 2 cat 3  dogs dog 1 dog 2 dog 3  lizards lizard 1 lizard 2 lizard 3 

model

$scope.animals = [   { name: "cat 1", type: "cat" },   { name: "cat 2", type: "cat" },   { name: "cat 3", type: "cat" },   { name: "dog 1", type: "dog" },   { name: "dog 2", type: "dog" },   { name: "dog 3", type: "dog" },   { name: "lizard 1", type: "lizard" },   { name: "lizard 2", type: "lizard" },   { name: "lizard 3", type: "lizard" } ]; 

view

<div ng-repeat="animal in animals">   <!-- if first animal type appearing show subtitle -->   {{animal.name}} </div> 

i not want structure data way i'm doing , rendering redundant ng-repeats.

model

$scope.cats = [  ... ]; $scope.dogs = [  ... ]; $scope.lizards = [  ... ]; 

view

<h2>cats</h2> <div ng-repeat="cat in cats">   {{cat.name}} </div>  <h2>dogs</h2> <div ng-repeat="dog in dogs">   <h2>dogs</h2>   {{dog.name}} </div>  <h2>lizards</h2> <div ng-repeat="lizard in lizards">   {{lizard.name}} </div> 

thanks in advance!

you need check if type different previous type. can item using $index - 1

   <div ng-repeat="animal in animals">       <h1 ng-if="animal.type != animals[$index - 1].type">         {{ animal.type }}       </h1>       {{animal.name}}     </div>