title: AngularJS directive to scroll to a given item
body: <p>I have a scope variable $scope.first_unread_id which is defined in my controller. In my template, I have:</p>
  
  <pre><code>&lt;div id="items" &gt;
    &lt;ul class="standard-list"&gt;
      &lt;li ng-repeat="item in items" scroll-to-id="first_unread_id"&gt;
      &lt;span class="content"&gt;{{ item.content }}&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my directive looks like:</p>
  
  <pre><code>angular.module('ScrollToId', []).
  directive('scrollToId', function () {
    return function (scope, element, attributes) {
      var id = scope.$parent[attributes["scrollToId"]];
      if (id === scope.item.id) {
        setTimeout(function () {
          window.scrollTo(0, element[0].offsetTop - 100)
        }, 20);
      }
    }
  
  });
  </code></pre>
  
  <p>it works, however, two questions: </p>
  
  <ol>
  <li><p>Is there a better way of getting the "first_unread_id" off the controller scope into the direct than interrogating scope.$parent?  This seems a bit 'icky'. I was hoping I could pass that through the view to the direct as a parameter w/o having to repeat that on ever li element.</p></li>
  <li><p>Is there a better way to avoid the need of the setTimeout() call? Without it, it works <em>sometimes</em> - I imagine due to difference in timing of layout. I understand the syntax I have used is defining a link function - but it isn't clear to me if that is a pre or post-link by default - and if that even matters for my issue.</p></li>
  </ol>