Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.19/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-controller="MainCtrl">
  <button ng-click="addItem()">Add Item</button>
  <button ng-click="allNewItems()">All New Items!</button>
  <div ng-repeat="item in items track by item.id">
    {{item.id}} - {{item.name}} - {{item.ts}} --- <detecto-matic/>
  </div>
</body>
</html>
 
console.clear();
​
var app = angular.module('myApp', []);
​
app.controller('MainCtrl', function($scope){
  var id = 1;
  
  $scope.items = [];
    
  $scope.addItem = function(){
    $scope.items.push({
      id: id,
      name: 'Item ' + id,
      ts: Date.now(),
    });
    id++;
  };
    
  $scope.allNewItems = function(){
    id = 1;
    $scope.items = [];
    $scope.addItem();
    $scope.addItem();
    $scope.addItem();
  };
  
  
  $scope.allNewItems();
});
​
app.directive('detectoMatic', function(){
  var counter = 0;
  return function(scope, elem) {
    console.log('initialized a directive! ' + new Date());
    elem.html('**' + counter++ + '**');
  }
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
bleshpro
0viewers