title: angularjs directive scope data not binding to template initially when app loads first
body: <p>Im in trouble with angularjs directive scope.</p>
  
  <p><strong>scenario</strong>: 
  scope data which is defined inside link function of directive.
  defined an external templateUrl.
  directive uses a service to fetch data from api.
  service is injected in directive.</p>
  
  <p><strong>problem</strong>
  Initially when app loads first after user login the directive scope data is not binding to template but if i refresh the browser it works fine as expected.</p>
  
  <p><strong>my code</strong></p>
  
  <pre><code>  link: function (scope, el, attrs) {
      // notificationWidgetService which fetch offline notification list 
      notificationWidgetService.getNotification();
  
  
      scope.$on('notificationWidgetService-received-data-event', function (evt, data) {
  
          var notification = data;
          if ($rootScope.notifications.notificationList.length &gt; 0) {
            var duplicate = true;
            for (var i = 0; i &lt; $rootScope.notifications.notificationList.length; i++) {
              if ($rootScope.notifications.notificationList[i].notificationId == notification.notificationId) {
                duplicate = true;
                break;
              } else {
                duplicate = false;
              }
            }
          } else {
            var duplicate = false;
          }
  
          if (!duplicate) {
            $rootScope.$apply(function() {
              $rootScope.notifications.notificationList.splice(0, 0, notification);
              $rootScope.notificationList = $rootScope.notifications.notificationList;
              $rootScope.notificationsCount = $rootScope.notificationList.length;
             console.log($rootScope.notificationList) // able to get data here
             console.log($rootScope.notificationsCount); // able to get data here
            });
          }
      });
    }
  };}]);
  </code></pre>
  
  <p>notificationWidgetService is a service which fetch notification from api and broadcast it.
  notificationWidgetService is signalR component which will keep broadcast messages whenever server pushes.</p>
  
  <p>and my template is </p>
  
  <pre><code>&lt;div ng-repeat="(key,notification) in notificationList track by $index"
       class="notify" id="notification-{{notification.notificationId}}"&gt;
    &lt;div class="checkbox" ng-if='notification.notificationType=="Action"'&gt;
      &lt;span ng-init="showSelectAll=true"&gt;&lt;/span&gt;
      &lt;input type="checkbox" ng-model="notification.notificationActive"
             ng-change="storeSelectedNotification(notification, notification.notificationActive, $event)"
             id="checkBox_{{notification.notificationId}}" class="checkbox rowSelect"&gt;
      &lt;label for="checkBox_{{notification.notificationId}}"&gt;&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="profile-pic"&gt;
      &lt;img ng-src="./images/personIcon.png" alt=""/&gt;
    &lt;/div&gt;
    &lt;div class="notify-info"&gt;
      &lt;span class="profile-name"&gt;{{notification.fromEmployeeName}} &lt;/span&gt;
  
      &lt;p&gt;
        {{notification.message}}
        &lt;!--&lt;limitlimit-content content="notification.message"&gt;&lt;/limitlimit-content&gt;--&gt;
  
            &lt;span ng-show="notification.startDate !=null &amp;&amp; notification.endDate != null"&gt;
              from {{notification.startDate | date : dateFormat}} to {{notification.endDate | date : dateFormat}}
            &lt;/span&gt;
      &lt;/p&gt;
  
      &lt;div class="action" ng-if='notification.notificationType=="Action"'&gt;
        &lt;button class="btn"&gt;
          &lt;i class="icon approve"&gt;&lt;/i&gt;Approve
        &lt;/button&gt;
        &lt;button class="btn"&gt;
          &lt;i class="icon reject"&gt;&lt;/i&gt;Reject
        &lt;/button&gt;
        &lt;button class="btn"&gt;
          &lt;i class="icon forward"&gt;&lt;/i&gt;Farward
        &lt;/button&gt;
        &lt;a class="btn only-icon" ng-href="im:sip:{{notification.fromEmployeeEmailAddress}}"&gt;
          &lt;i class="icon-skype icon-skype-call"&gt;&lt;/i&gt;
        &lt;/a&gt;
        &lt;!-- &lt;a class="btn only-icon" ng-href="sip:{{notification.fromEmployeeEmailAddress}}"&gt;&lt;i class="icon-skype"&gt;&lt;/i&gt;&lt;/a&gt; --&gt;
      &lt;/div&gt;
      &lt;div class="action" ng-if='notification.notificationType!="Action"'&gt;
        &lt;a class="btn only-icon" ng-href="im:sip:{{notification.fromEmployeeEmailAddress}}"&gt; &lt;i
          class="icon-skype icon-skype-call"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;button class="btn" ng-click="updateNotificationStatus(notification,1 )"&gt;
          &lt;i class="icon mark_as_read"&gt;&lt;/i&gt;MARK AS READ
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>All functionality works fine only after refreshing the page. But initially when user login and land to home page scope data is not binding,however i am able to see the data in console log</p>
  
  <p>Is any body face the same problem. can any body help me out</p>
  
  <p>Thanks and regards </p>