$index in md-chips do not update in AngularJS - angularjs

Question

$index in md-chips do not update in AngularJS. How could I overcome this? I need to place a comma before every chip except for the chip with the $index 0.
You can see that the $index do no update over here, for instance.
On the screenshot above the index should be 0, while it is 2 after I removed the first two chips.
Here is the code.
template
<div ng-controller="BasicDemoCtrl as ctrl" layout="column" ng-cloak="" class="chipsdemoBasicUsage" ng-app="MyApp">
<md-content class="md-padding" layout="column">
<md-chips class="custom-chips" ng-model="ctrl.vegObjs" readonly="ctrl.readonly" md-transform-chip="ctrl.newVeg($chip)" md-removable="ctrl.removable" input-aria-label="Vegetables">
<md-chip-template>
<span>
<strong>[{{$index}}] {{$chip.name}}</strong>
<em>({{$chip.type}})</em>
</span>
</md-chip-template>
<button md-chip-remove="" class="md-primary vegetablechip" aria-label="Remove {{$chip.name}}">
<md-icon md-svg-icon="md-close"></md-icon>
</button>
</md-chips>
<br>
</md-content>
</div>
css
.chipsdemoBasicUsage .errors {
font-size: 12px;
color: #dd2c00;
margin-top: 10px; }
.chipsdemoBasicUsage .custom-chips md-chip {
position: relative; }
.chipsdemoBasicUsage .custom-chips md-chip .md-chip-remove-container {
position: absolute;
right: 4px;
top: 4px;
margin-right: 0;
height: 24px; }
.chipsdemoBasicUsage .custom-chips md-chip .md-chip-remove-container button.vegetablechip {
position: relative;
height: 24px;
width: 24px;
line-height: 30px;
text-align: center;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
border: none;
box-shadow: none;
padding: 0;
margin: 0;
transition: background 0.15s linear;
display: block; }
.chipsdemoBasicUsage .custom-chips md-chip .md-chip-remove-container button.vegetablechip md-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0) scale(0.7);
color: white;
fill: white; }
.chipsdemoBasicUsage .custom-chips md-chip .md-chip-remove-container button.vegetablechip:hover, .chipsdemoBasicUsage .custom-chips md-chip .md-chip-remove-container button.vegetablechip:focus {
background: rgba(255, 0, 0, 0.8); }
.chipsdemoBasicUsage .custom-chips md-chips-wrap.md-removable md-chip md-chip-template {
padding-right: 5px; }
js
(function () {
'use strict';
angular
.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.config(['$mdIconProvider', function($mdIconProvider) {
$mdIconProvider.icon('md-close', 'img/icons/ic_close_24px.svg', 24);
}])
.controller('BasicDemoCtrl', DemoCtrl);
function DemoCtrl ($timeout, $q, $log) {
var self = this;
self.readonly = false;
// Lists of fruit names and Vegetable objects
self.fruitNames = ['Apple', 'Banana', 'Orange'];
self.ngChangeFruitNames = angular.copy(self.fruitNames);
self.roFruitNames = angular.copy(self.fruitNames);
self.editableFruitNames = angular.copy(self.fruitNames);
self.tags = [];
self.vegObjs = [
{
'name' : 'Broccoli',
'type' : 'Brassica'
},
{
'name' : 'Cabbage',
'type' : 'Brassica'
},
{
'name' : 'Carrot',
'type' : 'Umbelliferous'
}
];
self.newVeg = function(chip) {
return {
name: chip,
type: 'unknown'
};
};
self.onModelChange = function(newModel) {
$log.log('The model has changed to ' + newModel + '.');
};
}
})();
Here is the pen.

Answer 1

You can have custom function to get the index like below.
self.getIndex = function(chipName) {
for (var i = 0; i < self.vegObjs.length; i++) {
if (self.vegObjs[i].name === chipName) {
return i;
}
}
}
<md-chip-template>
<span>
<strong>[{{ctrl.getIndex($chip.name)}}] {{$chip.name}}</strong>
<em>({{$chip.type}})</em>
</span>
</md-chip-template>