announcer/notifier

Watch object creation/destroy

HTML

<script src="http://code.angularjs.org/1.1.3/angular.js"></script>
<script src="http://fonts.googleapis.com/css?family=Droid+Sans:400,700"></script>
<h3>Custom transclude demo</h3>
        
<div ng-controller="DemoCtrl">
  <ul notifier >
    <li announcer ng-repeat="item in items">
        {{ item }}<button ng-click="removeItem($index)">x</button>
    </li>
  </ul>
  <button ng-click="addItem()">add item</button>
  <div id="log"></div>
</div>

CSS

* {
    font-family: 'Droid Sans', sans-serif;
}
#log {
    margin-top:10px;
    font-size:10px
}

JavaScript

var app = angular.module('demo3', []);

app.controller('DemoCtrl', function($scope) {
  $scope.items = [];
  $scope.addItem = function() {
    $scope.items.push(Math.random());
  }
  $scope.removeItem = function(index){
      $scope.items.splice(index,1);
  }
 
});