title: passing data to a directive for ng-repeat inside of the directive
body: <p>I keep bumping my head on angular when I want to have a directive that displays a list of things, but I want it to be generic enough to handle more than one type/shape of object. For simple example lets say I have </p>
  
  <pre><code>&lt;select ng-options="person.id by person in people" ng-model="selectPerson"&gt;
    &lt;option&gt;
       {{person.name}}
    &lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>(Keep in mind that this is a simple example and something this simple would probably not benefit from being a directive)</p>
  
  <p>Now I want to turn it into a generic directive called cool-select
  I might try and do something like this in my js</p>
  
  <pre><code>//directive coolselect.directive.js
  angular.module('mycoolmodule',[]).directive('coolSelect',function(){
      return {
         restrict:'E',
         templateUrl:'js/coolselectdirective/_coolselect.html',//html from example above
         scope:{
               items:'=',
               displayProperty:'@',
               idProperty:'@',
               selectedItem:'='
         },
         link:function(scope,element){
          //do cool stuff in here
         }
     }
  });
  </code></pre>
  
  <p>But then here is where I start to throw up a little in my mouth</p>
  
  <pre><code>//html template _coolselect.html
  &lt;select ng-model="selectedItem" ng-options="item[scope.idProperty] by item in items"&gt;
    &lt;option&gt;      
       {{item[scope.displayProperty]}}
     &lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>To be perfectly honest I am not even sure this would work in angular. I have seen what ui-select does by using an outer scope. Maybe that is the way to go?
  <a href="https://github.com/angular-ui/ui-select/blob/master/dist/select.js#L892" rel="nofollow">https://github.com/angular-ui/ui-select/blob/master/dist/select.js#L892</a></p>
  
  <p>But then I think I would need to get fancy with transclude, like ui-select does.
  Isn't there an easier way? Am I trying to make directives to generic? Is this not a problem other people are running into?</p>
  
  <p>EDIT:
  In the end it would be ideal for it to look like this.</p>
  
  <pre><code>&lt;cool-select repeat="person.id by person in people" display-property="name"&gt;&lt;/cool-select&gt;
  </code></pre>