title: AngularJS directive inside a ng-repeat loop with variable-based templateUrl
body: <p>Ok, I'm kinda new to the whole AngularJS thing and I'm probably getting my hands dirtier than I should, but here's what I'm trying to do:</p>
  
  <ul>
  <li>loop through an array of fields (array of objects actually) for a customer entity</li>
  <li>call a directive that chooses the template from a field property</li>
  <li>data-bind the actual customer field to the ng-model inside the template</li>
  <li>display the field</li>
  </ul>
  
  <p>Here's what I have so far:</p>
  
  <p>looping HTML</p>
  
  <pre><code>&lt;div ng-repeat="info in customerCtrl.personalInfoFields"&gt;
      &lt;edit-field info="info" model="customerCtrl.customer"&gt;&lt;/edit-field&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>stripped down controller:</p>
  
  <pre><code>customerCtrl.personalInfoFields = [{'field':'NAME', 'type':'text'}, 
                                      {'field':'SURNAME', 'type':'text'}, 
                                      {'field':'MAIL', 'type':'email'}]
  customerCtrl.customer = customersFactory.customerDetails; // filled through a Factory, works fine if I just draw every single field manually in the HTML
  </code></pre>
  
  <p>directive:</p>
  
  <pre><code>myApp.directive('editField', ['$http', '$compile', 'capitalizeFilter', function($http, $compile, $capitalizeFilter) {
  return {
      scope: {
        info: "=",
        model: "="
      },
      replace: true,
      template: '&lt;div ng-include="url"&gt;&lt;/div&gt;',
      link: function(scope, element, attrs){
          scope.url = '/views/fields/edit'+$capitalizeFilter(scope.info.type)+'.html';
      }
      /*templateUrl: function(elem,attrs) 
      {
          if(typeof attrs.info.type === "undefined")
              return '/views/fields/editText.html';
  
          return '/views/fields/edit'+attrs.info.type+'.html'
      },*/
  };
  }]);
  </code></pre>
  
  <p>editText.html (the other files don't differ much right now, will do later)</p>
  
  <pre><code>&lt;div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"&gt;
  &lt;div class="form-group"&gt;
      &lt;label class="control-label"&gt;{{'customers.'+info.field | i18n | capitalize}}&lt;/label&gt;
      &lt;input type="text" class="form-control" ng-model="model[info.field]"/&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Right now, inside the field I just get [object Object], if I pass the actual field itself as model instead of the whole customer object it displays fine but it isn't binded (I can change the field content but it won't reflect in the controller object)
  The commented templateUrl part doesn't work, since AngularJS only compiles the URL once for the whole ng-repeat function so I'm stuck with the undefined variable -> editText for everyone</p>
  
  <p>How can I successfully bind the fields while still grabbing the right template for each field type?</p>