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

app.controller('MainCtrl', function($scope) {
  $scope.list = ['One', 'Two', 'Three'];
  $scope.log = function(message) {
    $scope.messages.push(message);
  }
  $scope.messages = [];
});

app.directive('example', function($log, $timeout) {
  return {
    restrict: 'A',
    link: function(scope, elment, attrs) {
      scope.log('id: ' + attrs.id);
      $timeout(function() {
        scope.log('id (in $timeout): ' + attrs.id);
      });
      attrs.$observe('id', function() {
        scope.log('id (in $observe): ' + attrs.id);        
      });
    }
  }
});
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" data-semver="1.0.7"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div id="id_{{item}}" ng-repeat="item in list" data-example></div>
    <div>
      Log:
      <p ng-repeat="message in messages">
        {{message}}
      </p>
    </div>
  </body>

</html>
/* Put your css in here */