Angular Material “md-chips” directive how to control that input field on select was focused not chip container?

Question

Angular Material "md-chips" directive how to control that input field on select was focused not chip container?

Chip template:

<md-chips name="limits" md-autocomplete-snap=""
          ng-model="ctrl.selectedVegetables"
          md-transform-chip="ctrl.transformChip($chip)"
          md-require-match="ctrl.autocompleteDemoRequireMatch" 
          md-enable-chip-edit="true"              
          >

  <md-autocomplete md-min-length="0"
                   md-selected-item="ctrl.selectedItem" md-search-text="ctrl.searchText" 
                   md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.name" 
                   placeholder="Search for a vegetable" md-no-cache="true">
      <span md-highlight-text="ctrl.searchText">{{item.name}}</span>
  </md-autocomplete>     

  <md-chip-template>

    <label>{{$chip.name}}</label>      
    <input required type="number" ng-model="$chip.change" step="0.01"/>
    <md-icon style="margin-top: -6px"> %</md-icon>

  </md-chip-template>
</md-chips>  

There is working example: enter link description here

How to make that when chip is selected the input field is focused but not chip container it self. Try to edit number value and you will understand what I mean.

Answer 1

This is a solution:

1- Add an id for the input you want to be focused, to be unique I'll set this id to be chip.$$hashkey :

<input type="number" step="0.01" required ng-model="$chip.change" ng-attr-id="{{$chip.$$hashKey}}" style="padding-left: 3px; margin-left: 3px" />

2- In the select event handler, you force the focus:

self.selectChip = (data) => { if(data) document.getElementById(data.$$hashKey).focus(); }