title: pass parameters to several AngularJS directive instances?
body: <p>Newbie question on angularJS, but don't see analogous case in tutorials having searched.  </p>
  
  <p>How do I pass different parameters to individual div instances using the same directive definition?   Here I'd expect to see <code>red green blue</code> but instead I see <code>blue blue blue</code> in the HTML.   I see the controller is getting called before the link.</p>
  
  <p><a href="http://jsfiddle.net/gradualstudent/Y2bBy/" rel="nofollow">http://jsfiddle.net/gradualstudent/Y2bBy/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html &gt;
  &lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        var app = angular.module('myApp', []);
  
        app.directive("element", function () {
          return {
            restrict: "A",
            template: '&lt;h1&gt;{{type}}&lt;/h1&gt;',
            link: function (scope, element, attrs) {
              scope.type = attrs.element;
              console.log("Setting:  "+scope.type);
            },
            controller: function ($scope) {
              console.log("Checking: "+$scope.type);
            }
          };
        })
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-app="myApp"&gt;
    &lt;div element="red"&gt;1&lt;/div&gt;
    &lt;div element="green"&gt;2&lt;/div&gt;
    &lt;div element="blue"&gt;3&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>