title: How to set ngModel inside ngRepeat within Angular JS custom directive
body: <p>I am trying to create a directive where I am trying to generate forms dynamically, based on model. It seems somehow <code>data-ng-model</code> is not being set correctly in this scenario.</p>
  
  <p>I am getting following output.</p>
  
  <pre><code>    &lt;input type="{{ item.type }}" class="form-control" id="{{ item.id }}" data-ng-model="{{ item.model }}" placeholder="{{ item.label }}"&gt;
  </code></pre>
  
  <p>Whereas I am expecting following.</p>
  
  <pre><code>    &lt;input type="text" class="form-control" id="role" data-ng-model="role.name" placeholder="Role Name"&gt;
  </code></pre>
  
  <p>One thing to note here is if I misspell or omit <code>ng-model</code> value it outputs correctly.</p>
  
  <p>I've following code.</p>
  
  <h3>Template (cb-form-elements.html)</h3>
  
  <pre><code>    &lt;form class="form-horizontal" role="form" data-ng-submit="save()"&gt;
        &lt;div class="form-group" data-ng-repeat="item in ngModel"&gt;
          &lt;label for="{{ item.id }}" class="col-sm-2 control-label"&gt;{{ item.label }}&lt;/label&gt;
          &lt;div class="col-sm-6"&gt;
            &lt;input type="{{ item.type }}" class="form-control" id="{{ item.id }}" placeholder="{{ item.label }}" data-ng-model="{{ item.model }}"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
          &lt;div class="col-sm-offset-2 col-sm-10"&gt;
            &lt;button type="submit" class="btn btn-default"&gt;Create Role&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  
  <h3>Directive</h3>
  
  <pre><code>    angular.module('secondarySalesApp')
        .directive('cbFormElements', function () {
          return {
            templateUrl: '/views/partials/cb-form-elements.html',
            restrict: 'EA',
              require: '^ngModel',
              scope: {
                ngModel: '='
              }
          };
        });
  </code></pre>
  
  <h3>Controller</h3>
  
  <pre><code>    angular.module('secondarySalesApp')
        .controller('RoleCtrl', function ($scope, Restangular) {
          $scope.roles = Restangular.all('roles').getList().$object;
  
          $scope.cbFormConfig = [{
              "label": "Role Name",
              'id': "role",
              'type': 'text',
              'model': 'role.name'
          }];
  
          $scope.save = function(){
              $scope.roles.post($scope.role);
          }
        });
  </code></pre>
  
  <h3>Declaration</h3>
  
  <pre><code>    &lt;data-cb-form-elements data-ng-model="cbFormConfig"&gt;&lt;/data-cb-form-elements&gt;
  </code></pre>
  
  <p>The same thing works if I move it into page from directive.
  Any help in this regard is appreciated. </p>