<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;
}
angular.module('myApp', ['ngAnimate'])
.animation('.fade', function() {
  return {
    enter: function(element, done) {
      element.css('display', 'none');
      $(element).fadeIn(1000, function() {
        done();
      });
    },
    leave: function(element, done) {
      $(element).fadeOut(1000, function() {
        done();
      });
    },
    move: function(element, done) {
      element.css('display', 'none');
      $(element).slideDown(500, function() {
        done();
      });
    }
  }
})
.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);
  };
});

External CSS

  1. //cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js
  2. //ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-animate.js
  3. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js