title: Angular.js passing parameter to directive
body: <p>I'm a newbie at Angular, so don't be surprise if the answer to this question is pretty basic. </p>
  
  <p>I'm trying to encapsulate a map in a directive, the map will have some custom behavior: I want it to communicate with a Service to retrieve all the points related to a <em>merchant</em>.</p>
  
  <p>So I want to pass the <em>merchant</em> as a parameter to the directive:</p>
  
  <p>This is the HTML:</p>
  
  <pre><code>&lt;div ng-app="myApp"&gt;
      &lt;div ng-controller="Ctrl1"&gt;
          &lt;p&gt;Ctrl 1: {{merchant1}}&lt;/p&gt;
          &lt;map merchantDetails="{{merchant1}}"&gt;&lt;/map&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the javascript:</p>
  
  <pre><code>var myApp = angular.module('myApp', []);
  
  myApp.controller('Ctrl1', function ($scope) {
      $scope.merchant1 = "foo"
  });
  
  myApp.controller('Ctrl2', function ($scope) {
      $scope.merchant2 = "bar"
  })
      .directive('map', function () {
      return {
          restrict: 'E',
          link: function (scope, element, attrs, controller) {
              scope.merchant2 = attrs.merchantDetails;
          },
          scope: {
              merchantDetails: "@"
          },
          template: 'Ctrl2: {{merchant2}}'
      }
  
  });
  </code></pre>
  
  <p>The problem is that <code>scope.merchant2</code> at the template never gets updated. 
  I would like it to have "foo", or at worst "bar", not blank.</p>
  
  <p>When I debug this in Chrome, controller <code>Ctrl2</code> initialization is never executed. Why? I would expect it to be done before the link phase.</p>
  
  <p>How do I do to get the "foo" value passed to <code>Ctrl2</code>?</p>
  
  <p>The jsfiddle is available <a href="https://jsfiddle.net/kentenzer/e7cfcakv/6/" rel="nofollow">here</a>.</p>