Why using directive I loose the Material effects? - angularjs

Question

I'm trying to understand what exactly is happening.
I had a form with Angular Material, something like:
<div layout-gt-sm="row">
<md-input-container class="md-block" flex-gt-sm>
<label>First name</label>
<input ng-model="user.firstName">
</md-input-container>
<md-input-container class="md-block" flex-gt-sm>
<label>Last Name</label>
<input ng-model="theMax">
</md-input-container>
</div>
... with the onfocus and onblur effecs + inputs layout full.
After that working, I change the form to work with directives and the form start to be like:
<div layout-gt-sm="row" class="core no-padding-bottom">
<!-- effect working -->
<md-input-container class="md-block" flex-gt-sm>
<md-icon><i class="material-icons">email</i></md-icon>
<input type="text" name="asd" placeholder="asd">
</md-input-container>
<!-- effect not working -->
<input-test name="name"></input-test>
</div>
... directive template:
<md-input-container class="md-icon-float md-block" flex-gt-sm md-no-float>
<md-icon class="material-icons">
<i class="material-icons">{{ attrs.icon }}</i>
</md-icon>
<input
type="text"
name="{{ attrs.name }}">
<div ng-messages="form[attrs.name].$error" role="alert">
<div ng-message="server">{{ form[attrs.name].$error.serverMessage }}</div>
</div>
</md-input-container>
... the directive:
app.directive('inputTest', function($injector, $q, $location) {
return {
replace: true,
restrict: 'AE',
scope: {
model: '=',
form: '='
},
templateUrl: baseViewPath('directives/form/text.html'),
link: function($scope, $element, $attrs) {
$scope.attrs = $attrs;
$scope.mask = function() {
if(typeof $attrs.mask !== 'undefined') {
return $attrs.mask;
}
};
}
};
});
Now, the form is working 50%, where is been send and validate as well but there's no Material effects and no full fields on screen.
What could that be?
UPDATE
I think that I "fixed" changing the placeholder to label
<label>{{ attrs.placeholder }}</label>