How can I define items of an array in a form in AngularJS

Question

That's my Array with objects:

//Controller
$scope.form = [
  {
   name: 'Lname',
   items: [{
      label: 'Lastname',
      type: 'text',
      model: 'lname',
      pattern: '/^[a-zA-Z]$/',
      required: true
   }]
 },
 {
  name: 'Fname',
  items: [{
    label: 'Firstname',
    type: 'text',
    model: 'fname',
    pattern: '/^[a-zA-Z]$/',
    required: true
  }]
 }];

Here is the form of my view:

<form class="form-horizontal" name="editForm" novalidate>
  <div ng-repeat="elements in form">
    <div class="form-group-sm has-feedback" ng-repeat="el in elements.items">
      <label class="control-label">{{el.label}}</label>
      <input type="{{el.type}}"
             class="form-control" 
             placeholder="{el.label}"
             ng-model="selected.[el.model]" 
             ng-pattern="el.pattern" 
             ng-required="el.required"
      />

Only the label is correctly displayed. The other variables won't handled correctly. What is wrong?

Answer 1

You need interpolate the pattern and the labels, so change from:

placeholder="{el.label}"
ng-pattern="el.pattern"

To:

placeholder="{{el.label}}"
ng-pattern="{{el.pattern}}"

Fiddle