<div ng-app="MyApp"
     ng-controller="MyCtrl as ctrl">

  <list
    data="ctrl.dataModel.list"
    on-delete="ctrl.delete($item)"
    on-add="ctrl.add($label)"
    ></list>

</div>


------
angular.module('MyApp')

.value('DataModel', {
  list: [
    { label: 'one'},
    { label: 'two'},
  ]
})

.controller('MyCtrl', function(DataModel) {
  this.dataModel = DataModel;



  this.add = function(name) {
    this.dataModel.list.push({
      label: name
    });
  };

  this.delete = function(item) {
  console.log ('..>', item)
    var i = this.dataModel.list.indexOf(item);
    this.dataModel.list.splice(i, 1);
  };

})




------


angular.module('MyApp', [])

.component('list', {
    bindings: {
      data: '=',
      onDelete: '&',
      onAdd: '&',
    },
    restrict: 'E',
    template: `
      <div>
        <!-- Add Form -->
        <form-add on-add="$ctrl.add($label)"/></form-add>

        <!-- item list -->
        <ul class="list-group">
          <list-item on-delete="$ctrl.remove($item)"
            ng-repeat="item in $ctrl.data"
            item="item"/>
        </ul>
      </div>`,
    controller: function() {

      this.add = function(name) {
      console.log('add')
        this.onAdd({$label: name});
      };

      this.remove = function(item) {
        this.onDelete({$item: item});
      };
    }
})



------

.component('formAdd', {
    restrict: 'E',
    bindings: {
      onAdd: '&'
    },
    template: `
      <input type="text"
        ng-model="$ctrl.name"
        class="form-control" />
      <button ng-disabled="!$ctrl.name.length"
        ng-click="$ctrl.add()"
        class="btn btn-xs">
        Add Item
      </button> <hr />
   `,
    controller: function() {
      this.add = function() {
        this.onAdd({ $label: this.name})
        //this.list.add(this.name);
        this.name = null;
      };
    }
})



.component('listItem', {
    bindings: {
      item: '=',
      onDelete: '&'
    },
    restrict: 'E',
    template: `
    <li class="list-group-item">
      {{$ctrl.item.label}}
      <button ng-click="$ctrl.remove()"
         class="btn btn-xs pull-right">
      Remove</button>
    </li>
    `,
    controller: function() {
      this.remove = function() {
       // this.list.remove(this.item);
       this.onDelete({ $item: this.item });
      };
    }
});

------