<div class="container" ng-app="myApp"  ng-controller="ItemCtrl">
  <div class="row">
    <div class="one-half column offset-by-three">
      <h1 class="text-center">Groceries</h1>
      <ul>
        <li ng-repeat="item in items" class="fade">
          {{item.name}}
          <span ng-click="removeItem($index)">X</span>
        </li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="one-half column offset-by-three">
      <input type="text" ng-model="item.name" />
      <button class="button-primary" ng-click="addItem()">Add Item</button>
    </div>
  </div>
</div>

.text-center {
  text-align: center;
}
li span {
  float: right;
  cursor: pointer;
}

.fade {
  transition: 1s linear all;
  -webkit-transition: 1s linear all;
}

.fade.ng-enter {
  opacity: 0;
}

.fade.ng-enter.ng-enter-active {
  opacity: 1;
}

.fade.ng-leave {
  opacity: 1;
}

.fade.ng-leave.ng-leave-active {
  opacity: 0;
}

angular.module('myApp', ['ngAnimate'])
.controller('ItemCtrl', function($scope) {
  $scope.items = [
    {name: "Lunchmeat"},
    {name: "Bread"},
    {name: "Milk"},
    {name: "Mustard"},
    {name: "Cheese"}
  ];
  $scope.addItem = function() {
    $scope.items.push($scope.item);
    $scope.item = {};
  };
  $scope.removeItem = function(index) {
    $scope.items.splice(index, 1);
  };
});