Chips with Bootstrap

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <link data-require="font-awesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
    <script data-require="angular.js@1.5.3" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script data-require="ui-bootstrap@*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
    <link rel="stylesheet" href="chips.css" />
    <script src="main.module.js"></script>
    <script src="chips.module.js"></script>
  </head>

  <body class="container" ng-app="mainModule">
    <div ng-controller="mainController as ctrl">
      <div class="row">
          <form class="form-inline">
            <div class="form-group col-xs-6 col-sm-6 col-md-6">
              <input type="text" 
                     class="form-control" 
                     id="exampleInputName2" 
                     placeholder="Insert Category"
                     ng-model="ctrl.insert">
            </div>
            <button type="submit" class="btn btn-default" ng-click="ctrl.add(ctrl.insert)">
              Validate
            </button>
          </form>
      </div>
      <ul class="list-inline" >
        <li class="listItem" ng-repeat="elem in ctrl.items">
          <bl-chips text="{{elem}}" close="ctrl.close(text)"></bl-chips>
        </li>
      </ul>
    </div>
  </body>

</html>

'use strict';

(function(angular){
  
  var app = angular.module('mainModule', ['chips']);
  
  app.controller('mainController',mainController);
  
  function mainController($filter){
    var self = this;
    
    init();
    
    function init(){
       self.items = ['test 1'];
       self.insert = '';
    }
   
    self.add = add;
    self.close = close;
    
    function add(input){
       if(self.items.indexOf(input) === -1  
            && self.insert !== ''){
          
          self.items.push(input);
          self.insert = '';
       } else {
         console.log('presente');
       }
    }
    
    function close(text){
      self.items = $filter('filter')(self.items, function(value){
        return value != text;
      });
    }
  }
  
})(window.angular);

/* Styles go here */

.chips{
  border-radius: 15px !important;
  font-size: 20px;
  width: auto;
}

.chipsContainer{
  margin-top: 10px;
  margin-bottom: 10px;
}

.pointer{
  cursor: pointer;
}

'use strict';

(function(angular){

  var _template =  'chips.html';

  var app = angular.module('chips', ['ui.bootstrap']);
  
  app.component('blChips',{
      
      restrict: 'E',
      bindings: {
        text: '@',
        close: '&'
      },
      templateUrl: _template,
      controller: ChipsController,
      controllerAs: 'c'
    });
  
  
  function ChipsController(){
    var self = this;
    
    self.$onInit = init;
    
    function init(){}
    
  }
  
})(window.angular);

<div class="chipsContainer">
  <div class="label label-default chips">
    {{c.text}} 
    <i class="fa fa-times-circle pointer" ng-click="c.close({text: c.text})"></i>
  </div>
</div>