title: AngularJS and Directive Scope with Template not populating
body: <p>I am having issues working with direvtives and their scope. I've created a directive for getting all the members of a site and put them in a div, like so:</p>
  
  <pre><code>EngagementApp.directive('siteMembers', ['$compile', 'Request',
  function($compile, Request) {
  
      return {
          restrict : 'A',
          scope : false,
          template : '&lt;h4&gt;Members {{name}}&lt;/h4&gt;&lt;span class="view-all"&gt;&lt;a href="/members"&gt;View all&lt;/a&gt;&lt;/span&gt;&lt;ul&gt;&lt;li ng-repeat="user in users"&gt;&lt;a profile-modal="{{user.user_name}}" href="{{site_url}}{{user.user_name}}"&gt;&lt;img src="{{site_url}}users/profileimage/{{user.user_id}}"&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;',
          link : function(scope, element, attrs) {
              scope.site_url = main_site_url;
  
              Request.get({
                  url: 'users',
                  data : {
                      fields : 'user_id, user_name',
                      conditions : {customer_id : current_site_id},
                      join : ['customer_users']
                  },
                  success: function (response) {
                      console.log(response);
                      scope.users = response;
                  }
              });
  
  
          }
      };
  }]);
  </code></pre>
  
  <p>This works totally fine. Now I have another directive that populates a modal for user when clicked, like so:</p>
  
  <pre><code>EngagementApp.directive('profileModal', ['$compile', 'Request', '$modal', '$q','createDialog',
  function($compile, Request, $modal, $q, createDialog) {
  
      return {
          restrict : 'A',
          scope : false,
          link : function(scope, element, attrs) {
              var modalPromise = null;
              element.bind('click', function(e) {
                  e.preventDefault();
                  scope.modal = {
                      username : attrs.profileModal,
                      url : main_site_url
                  };
  
                  scope.url = main_site_url;
  
                  console.log(scope);
                  createDialog({
                      id : 'profile_modal',
                      title : attrs.profileModal + " 's Profile",
                      template : '&lt;iframe src="{{url}}{{modal.username}}?modal=true" style="width: 100%; height: 100%; border: none;"&gt;&lt;/iframe&gt;',
                      footerTemplate: '&lt;button class="btn" ng-click="$modalCancel()"&gt;Close&lt;/button&gt;',
                      backdrop: true,
                      css : {                     
                          height: '80%'
                      }
                  }, scope);
  
              });
  
          }
      };
  }]);
  </code></pre>
  
  <p>Here it where this mess up. The directive for the modal, when called from the members directive, never works. The temp;ate options {{url}} and {{username}} are empty.</p>
  
  <p>But if I put the profileModal on another element that was not populated members directive(so it called first), it works.</p>
  
  <p>Am I doing something wrong here with the scope or binding templates to scope?</p>