title: how to pass data from service to directive in angular.js
body: <p>I have an alert service which shows alerts on top of the page. I have written a service and a directive which feeds off of the data coming from the service.</p>
  
  <p>However, when i add a service using teh alert service and pass it to the directive, it does not show up, the alert</p>
  
  <p>here is my code</p>
  
  <p>The template </p>
  
  <pre><code>&lt;div class="alert alert-{{alert.type}}"&gt;
      &lt;button type="button" class="close" data-dismiss="alert" aria-hidden="true" ng-click="close()"&gt;&amp;times;&lt;/button&gt;
      &lt;div ng-bind="::alert.message" &gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Alert Service and directive</p>
  
  <pre><code>angular.module('test')
      .service('alertService', function() {
          var alerts = [];
          this.add = function(type, msg) {
              var self = this;
              var alert = {
                  type: type,
                  msg: msg,
                  close: function() {
                      return self.closeAlert(alert);
                  }
              };
              return alerts.push(alert);
          };
          this.closeAlert = function(alert) {
              return this.closeAlertIdx(alerts.indexOf(alert));
          };
          this.closeAlertIdx = function(index) {
              return alerts.splice(index, 1);
          };
          this.clear = function() {
              alerts = [];
          };
          this.getAlerts = function() {
              return alerts;
          };
      })
      .directive('alertList', ['alertService', function(alertService) {
          return {
              restrict: 'EA',
              templateUrl: 'templates/alert/alert.html',
              replace: true,
              link: function(scope) {
                  scope.alerts = alertService.getAlerts();
              }
          };
      }]);
  </code></pre>
  
  <p>In the index.html , i have referenced the alert-list directive</p>
  
  <pre><code>&lt;div&gt;
     &lt;alert-list ng-repeat="alert in alerts"&gt;
     &lt;/alert-list&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In my controller i have, </p>
  
  <pre><code>alertService.add('info', 'This is a message');
  </code></pre>
  
  <p>I see that the alertService adds the alert to the array, but when i put a breakpoint in the link function of the directive, it never gets called</p>