(AngularJs material) Make md-chips editable while Displaying an ordered set of objects as chips

Question

I am using the md-chips component to add an object just like

<md-chips class="custom-chips lms-list-custom-field" ng-model="roleCustomField.ListCustomFieldValues"                               readonly="addEditCustomRoleCntrl.readonly" md-transform-chip="addEditCustomRoleCntrl.newListCustomFieldValues($chip)" placeholder="{{'EnterListValues' | translate}}">
     <md-chip-template>
          <span>
              <strong>{{$chip.Value}}</strong>
           </span>
      </md-chip-template>

       <button md-chip-remove class="md-primary closeButton">
              <i class="fa fa-times" aria-hidden="true"></i>
       </button>
 </md-chips>

Below is my Js code that generates the object

addEditCustomRoleCntrl.newListCustomFieldValues = function (chip) {
    return {
        Value: chip,
        IsActive: true
    };
};

I want to use md-enable-chip-edit but it works only with the basic template.

any recommendations ?

PS: I tried making the chip in a basic template then i made a function that creates the object for me .. it worked in my add view but failed in edit view as i retrieve the object from the database attached to an id.