Angular custom directive bindings & validation - angularjs

Question

I am constructing form, and my markup is repeating all the time, so I tough I could make ng generate it for me.
Here is my partial
<div class="row fieldset">
<div class="column column-3">
<label for="{{params.fieldId}}">
{{params.labelText}}
</label>
</div>
<div class="column column-5">
<input type="text" ng-required="{{params.required}}" id="{{params.fieldId}}" name="{{params.fieldId}}" ng-model="params.ngModel" />
<small class="error" ng-show="????">{{params.validatioMessage}}</small>
</div>
<div class="column column-4" >
<div class="hint">
<p>{{params.hintTitle}}</p>
<p>{{params.hintText}}</p>
</div>
</div>
</div>
JSON object
$scope.paramz = {
fieldId: "firstname",
labelText: "First Name",
validatioMessage: "This field is required",
hintTitle: "First name",
hintText: "Please enter your first name",
ngModel: "form.firstName",
required: true
}
Directive:
<inputfield params="paramz"></inputfield>
My form consists of several steps, each in its own ng-formI need to validate each input field based on input state. As far as I am aware I can't just use dynamic variables in expressions what are my options, validation simply consists of $diry && $invalid
/*------------------------------*\
Grid System
\*------------------------------*/
.row,
.column {
box-sizing: border-box;
}
.row {
margin-bottom: 5px;
}
.row:before,
.row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}
.column {
position: relative;
float: left;
display: block;
padding: 0 7px;
}
.column-1 {
width: calc(100% / 12 * 1);
}
.column-2 {
width: calc(100% / 12 * 2);
}
.column-3 {
width: calc(100% / 12 * 3);
}
.column-4 {
width: calc(100% / 12 * 4);
}
.column-5 {
width: calc(100% / 12 * 5);
}
.column-6 {
width: calc(100% / 12 * 6);
}
.column-7 {
width: calc(100% / 12 * 7);
}
.column-8 {
width: calc(100% / 12 * /);
}
.column-9 {
width: calc(100% / 12 * 9);
}
.column-10 {
width: calc(100% / 12 * 10);
}
.column-11 {
width: calc(100% / 12 * 11);
}
.column-12 {
width: 100%;
margin-left: 0;
}
#media only screen and (max-width: 550px) {
.column-1,
.column-2,
.column-3,
.column-4,
.column-5,
.column-6,
.column-7,
.column-8,
.column-9,
.column-10,
.column-11,
.column-12 {
float: none;
width: auto;
}
.column + .column {
margin-left: 0;
}
}
section.ng-valid.ng-dirty h1.header:after {
content: "\f00c";
margin-left: 10px;
font-family: fontawesome;
}
body {
font-family: Arial;
}
.column input[type=radio] {
display: none;
}
input[type=text] {
border: 1px solid #569e48;
width: 100%;
font-size: 14px;
line-height: 1em;
padding: 0 7.5px;
min-height: 36px;
position: relative;
}
input.ng-invalid.ng-touched {
border: 1px solid #a90041;
background: #f9f2f4;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E");
background-position: center right .625em;
background-repeat: no-repeat;
padding-right: 2.25rem;
background-size: 1.25rem 1.25rem;
}
input.ng-valid.ng-touched {
background: #f9fcf5;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#5cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
background-position: center right .625rem;
background-repeat: no-repeat;
padding-right: 2.25rem;
background-size: 1.25rem 1.25rem;
}
.fieldset {
display: flex;
}
.fieldset .column {
flex: 1;
padding: 5px 7px;
line-height: 35px;
}
.fieldset:hover {
background: #ebf5de;
box-sizing: border-box;
outline: 1px solid #60a250;
}
.fieldset:hover .hint {
display: block;
}
.hint {
position: absolute;
display: none;
}
input {
box-sizing: border-box;
}
<div class="content-body">
<div class="row fieldset">
<div class="column column-3">
<label for="fistName">Name</label>
</div>
<div class="column column-5">
<input id="fistName" type="text" required name="lasttName" ng-model="form.lasttName" />
</div>
<div class="column column-4">
<span class="hint">
Name
Please enter your name
</span>
</div>
</div>
<div class="row fieldset">
<div class="column column-3">
<label for="lastName">Surname</label>
</div>
<div class="column column-5">
<input id="lastName" type="text" required name="lasttName" ng-model="form.lasttName" />
</div>
<div class="column column-4">
<span class="hint">
Surname
Please enter your surname
</span>
</div>
</div>
</div>
If I just copy paste code and adjust markup it is all fine, but I don't want to repeat all that code, so I created custom directive.
Working with 1st and 3rd col is easy, it is just text string I need to display,
2nd col is pain...
I need to check input state, for most of the time without using directive it is as mentioned before $invalid && $dirty, but I have no idea how can I do that in directive. If someone is interested in helping me out I can send you archieved solution with my exact issue