An idea for a form generator for angularJS that uses HTML and JavaScript, but not removing HTML code, just reducing (for free styling), and absctracting JS events, and angular validation.

form.html

<!-- if nfMobile and nfTheme difined, force the html theme to use that preconfigured styles (with will change the html structure). -->
<form nf="user" nf-create nf-theme="bootstrap:inline" nf-mobile="bootstrap:horizontal">
  <input nf-model="user.name" nf-grid="6">
    <nf-message nf-for="user.name">
  <input nf-model="user.email" nf-grid="6">
    <nf-message nf-for="user.email">

  <input nf-model="user.phone" nf-grid="6">
  <input nf-model="user.birthdate" nf-grid="6">

  <button nf-submit></button>
  <button nf-reset></button>
</form>

<table nf-form="user" nf-list="name,email,birthdate"></table>

<table nf-form="user" nf-list="{name:'Nome',email:'E-mail',birthdate:'Nascimento'}">
  <tr nf-populate="users as user">
    <nf-if="users.active">
      <td>{{ users.name }}</td>
      <td>{{ users.email }}</td>
      <td>{{ users.birthdate }}</td>
    </nf-if>
    <nf-else>
      <td>{{ users.name }}</td>
      <td></td>
      <td>inactive</td>
    </nf-else>
  </tr>
</table>

NueForm.improve.js

$NueFormProvider.config({
  messages: {
    myOwnValidation2: function(ret) {
      // ret is the returned value from the validation method 'myOwnValidation2'
      if (ret > 50)
        return "A senha é muito forte.";
      if (ret > 40)
        return "A senha é forte.";
      if (ret > 30)
        return "A senha é fraca.";
      if (ret > 0)
        return "A senha é horrível.";
    },
    $error: {
      required: "O campo ${field} é obrigatório.",
      minLength: "O campo ${field} deve conter pelo menos ${minLength} letras",
      myOwnValidation: "O campo ${field} deve entre ${myOwnValidation[0]} e ${myOwnValidation[1]} letras."
    },
    $warning: {
      strongCheck: "Your password is weak."
    },
    $sucess: {
      strongCheck: "Your password is very strong."
    }
  },
  validations: {
    myOwnValidation: {
      label: "Minha Validação",
      validate: function(input, a, b) {
        return input.length > a && input.length < b;
      }
    }
    strongCheck: {
      label: "Força da Senha",
      validate: function(input) {
        return {
          $success: function() {
            // the success function will only be dispatched when all validations, the error and the warning function return true.
            return true;
          }
          $warning: function() {
            // the warning function will only be dispatched when all validations, and the error function return true.
            return input.length > 8 && /[A-Z]/.test(input) && /[a-z]/.test(input) && /[0-9]/.test(input);
          }
        };
      }
    }
  }
});

// ...

login
  .$set('password', {
    strongCheck: {
      value: 
    },
    required: true,
    allowOnly: 'password',
    label: "Senha"
  })

NueForm.js

$NueFormProvider.config({
  messages: {
    required: "O campo ${field} é obrigatório.",
    minLength: "O campo ${field} deve conter pelo menos ${minLength} letras",
    myOwnValidation: "O campo ${field} deve entre ${myOwnValidation[0]} e ${myOwnValidation[1]} letras."
  }
});

var login = new NueForm('login');

login
  .$set('login', {
    required: true,
    unique: true,
    allowOnly: 'email',
    myOwnValidation: {
      value: [5,15],
      validate: function(input, a, b) {
        return input.length > a && input.length < b;
      }
    },
    label: "E-mail"
  })
  .$set('password', {
    required: true,
    allowOnly: 'password',
    label: "Senha"
  })

// define the server URL
login.$server('auth/signin')
  $post
    .success(function() {
  
    })


var user = new NueForm('user');

user.$set({
  name: {
    required: true,
    minLength: 3,
    label: "Nome"
  }, 
  email: {
    required: true,
    unique: true,
    allowOnly: 'email',
    label: "E-mail"
  }
});

console.log(user.$data);
// {name: "", email: "", ...}
// retrieve all the data model.

console.log(user.$valid);
// boolean

user.$server('api/user')
  .$create
    .$then(function() {

    })
  .$edit
    .$success(function() {

    })
    .$error(function() {

    })
  .$list
    .$then(function() {

    })
  .$delete
    .$then(function() {

    })
    

// It is better to use a service for this
// like so:

var user = new UserService();

// and in the user service, import the NueForm service extending it.