fewfew

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

  <list data="ctrl.dataModel.list"></list>

</div>



-------

angular.module('MyApp')

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

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


-----------


angular.module('MyApp', [])

.component('list', {
    bindings: {
      data: '='
    },
    restrict: 'E',
    template: `
      <div>
        <!-- Add Form -->
        <form-add /></form-add>

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

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

      this.remove = function(item) {
        var i = this.data.indexOf(item);
        this.data.splice(i, 1);
      };
    }
})


----


.component('formAdd', {
    restrict: 'E',
    require:  {
      list: '^list'
    },
    bindings: {},
    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.list.add(this.name);
        this.name = null;
      };
    }
})



.component('listItem', {
    bindings: {
      item: '='
    },
    restrict: 'E',
    require:  {
      list: '^list'
    },
    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);
      };
    }
});