Note: “defer” attribute need to be added when you pass a list of Objects.

1

2

scope.content=[{name:'India',fl:'I'},{name:'China',fl:'C'}];

<chips deferng-model="content">

Rendering data:

1

2

3

<chip-tmpl>

<div>{{chip.defer.name}} <span>{{chip.defer.fl}}</span></div>

</chip-tmpl>

chip.isLoading to indicate the loading.

chip.isFailed to indicate the rejected data
$promise.reject

Directive
remove-chip (optional):

Param @remove-chip(optional):

Call back function should return true or false.

1

remove-chip="removeCallBack(data)"

When you click on this element, the chip is removed. Before deleting the chip, it calls a call back method and the chip data is accessed. After accessing the data, the chip gets removed if the returned value is true.

Pressing the ‘backspace’ or ‘delete’ key also removes the chip if it’s in focus.

This directive is optional, include this directive if you want the delete functionality.

Directive
chip-control:

It controls the input element. Add it with input element like below

1

<input chip-control></input>

It will add the new chip when the enter key is pressed on the input element.

Directive
ng-model-control:

It will add the chip when you add the new data to
ng-model . Use this directive when it’s required to select the data from the drop-down, like select2 or bootstrap typeahead component.

1

<input ng-model-control ng-model=""uib-typeahead="company for company in data"></input>

I like the idea however, a documentation as a blog post doesn’t serve the right purposes. It makes more sense to have a github page for the project and put everything there. One apparent reason is that in some time, this post will get lost in time and it’ll be difficult to impossible for someone to find docs for your module.

The post can however be about some of the use cases and some general idea about it. May be create a real world app at tiny scale and integrate it with chips in the blog post.