title: Passing variables from the current scope to a compiled directive
body: <p>I'm trying to pass a variable from the current scope to a directive added via the $compile service. </p>
  
  <p>I can pass a string to the child directive but not the actual object.</p>
  
  <p>Here's a fiddle with the scenario : <a href="http://jsfiddle.net/ewx2trvx/2/">http://jsfiddle.net/ewx2trvx/2/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;section ng-app="myApp" ng-controller="MainCtrl"&gt;
      &lt;addbuttonsbutton&gt;&lt;/addbuttonsbutton&gt;
      &lt;div id="space-for-buttons"&gt;&lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var myApp = angular.module('myApp', []);
  
  function MainCtrl($scope) {
      $scope.count = 0;
  }
  
  myApp.directive("addbuttonsbutton", function () {
      return {
          restrict: "E",
          template: "&lt;button addbuttons&gt;Click to add buttons&lt;/button&gt;"
      }
  });
  
  //Directive for adding buttons on click that show an alert on click
  myApp.directive("addbuttons", function ($compile) {
      return function (scope, element, attrs) {
          element.bind("click", function () {
              scope.count++;
              angular.element(document.getElementById('space-for-buttons'))
                  .append($compile("&lt;alert alert='count'&gt;&lt;/alert&gt;")(scope));
          });
      };
  });
  
  //Directive for showing an alert on click
  myApp.directive("alert", function () {
      return {
          template: "&lt;div&gt;&lt;button class='btn btn-default'&gt;Show alert # {{count}}&lt;/button&gt;&lt;/div&gt;",
          scope: {
              a: '@alert'
          },
          replace:true,        
          link: function (scope, element, attrs) {
              element.bind("click", function () {
                  console.log(scope.a);
                  alert("This is alert #" + scope.a);
              });
          }
      };
  });
  </code></pre>
  
  <p>Any thoughts? </p>
  
  <p>Thanks.</p>