title: AngularJs directive with HTTP request data
body: <p>I'm relatively new to AngularJs, I have a problem using a custom directive when data comes from an HTTP request. </p>
  
  <p>I have a service with an HTTP get request.</p>
  
  <pre><code>app.service('someService', function($http, $q){
  
      this.getData = function(){
  
          var deferred = $q.defer();
          $http({
              method: 'GET',
              url: 'theUrl'
          })
          .success(function(data, status){
              deferred.resolve(data);
          })
          .error(function(data, status){
              deferred.reject;
          })
  
          return deferred.promise;
      }
  
  })
  </code></pre>
  
  <p>and a controller that calls the service.</p>
  
  <pre><code>app.controller('someConroller', function($scope, someService){
  
      someService.getData().then(function(response){
  
          $scope.data = response;
      })
  
      $scope.someArrayData = [
                   {.....}, {.....}, ...
               ]
  }
  </code></pre>
  
  <p>Here is a very simple custom directive. </p>
  
  <pre><code>app.directive('customDirective', function(){
  
      return {
  
          link: function(scope, element, attrs){
  
              console.log(scope[attrs['customDirective']]);
          }
      }
  })
  </code></pre>
  
  <p>The problem is when I get an instance of the directive using <code>someArrayData</code> it works fine. But when I get an instance of the directive using <code>data</code> (the data that I get from the http service) console.log(data) gives me undefined. </p>
  
  <pre><code>&lt;div custom-directive="someArrayData"&gt;&lt;/div&gt;&lt;!-- console.log(scope[attrs['customDirective']]) gives the expected result --&gt;
  
  &lt;div custom-directive="data"&gt;&lt;/div&gt;&lt;!-- console.log(scope[attrs['customDirective']]) undefined --&gt;
  </code></pre>
  
  <p>Thanks for helping. </p>