title: AngularJS pass $resource as a directive parameter
body: <p>I have just came up with a directive that loads a dropdown box according to a list coming from an API call ($resource).</p>
  
  <p>Controller:</p>
  
  <pre><code>App.controller(
  'TestCtrl', [
  '$scope', 'countriesFactory',
  function($scope, countriesFactory){
  
          /* Call API */
          countriesFactory().then(function(data){
                $scope.countryList = data;
          });
  
  }])
  </code></pre>
  
  <p>The API call returns:</p>
  
  <pre><code>{"country":[{"code":"ABW","label":"Aruba"},{"code":"AFG","label":"Afghanistan"},{"code":"AGO","label":"Angola"}]}
  </code></pre>
  
  <p>Template:</p>
  
  <pre><code>&lt;input-select model-ref-list="countryList"&gt;&lt;/input-select&gt;
  </code></pre>
  
  <p>Directive:</p>
  
  <pre><code>App
  .directive("inputSelect"
  , function() {
  
      var Template =
          '&lt;select ng-options="item.label for item in modelRefList" required&gt;&lt;/select&gt;';
  
      return {
          restrict: 'EA',
          template: Template,
          scope: {
              modelRefList: '='       
          },
          link: function(scope){
            console.log(scope.modelRefList);
          }
        };
     }
  );
  </code></pre>
  
  <p>First of all: I simplified a lot the overall issue, so that it looks that the directive is completely overkill in that situation, but in the end, it is not :D.</p>
  
  <p>Problem: My console.log is always undefined.</p>
  
  <p>I made a bit of research and realized that I needed to play with promises to wait for my country list to appear to be actually given to the directive.
  So I tried modifying my controller and not use the result of the API call promise, but directly the resource itself:</p>
  
  <p>New Controller:</p>
  
  <pre><code>App.controller(
  'TestCtrl', [
  '$scope', 'countriesFactory',
  function($scope, countriesFactory){
  
          /* Call API */
          $scope.countryList = resourceAPICall();
  
  }])
  </code></pre>
  
  <p>But still undefined :/.</p>
  
  <p>How can I pass direclty the resource (containing the promise I can then use to defer the load of the select) to the directive?</p>
  
  <p>SOLUTION FOR ANGULARJS 1.2:</p>
  
  <p>Directive:</p>
  
  <pre><code>App
  .directive("inputSelect"
  , function() {
  
      var Template =
          '&lt;select ng-options="item.label for item in modelRefList" required&gt;&lt;/select&gt;';
  
      return {
          restrict: 'EA',
          template: Template,
          scope: {
              modelRefList: '='       
          },
          link: function(scope){
             scope.modelRefList.$promise.then(function(data){
                      console.log(data);
             }
        };
     }
  );
  </code></pre>
  
  <p>To pass a API call result to a directive, you need to pass its resource and play with its promise inside the directive itself.</p>
  
  <p>Thanks everybody for the help.</p>