$index in md-chips do not update in 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>