<div class="col-md-8" ng-class="{'has-error': hasError(profile_form.facebook)}">
                <div class="input-group">
                    <span class="input-group-addon">
                        <i class="fa fa-facebook fa-input-group" ng-style="{color: '#3b5998'}"></i>
                    </span>
                    <input class="form-control" type="url" ng-model="share['facebook'].url"
                           placeholder="Ex: https://www.facebook.com/empresa"
                           name="facebook" ng-required="share['facebook'].show" validate-url>
                    <span class="input-group-addon">
                        <input type="checkbox" ng-model="share['facebook'].show">
                    </span>
                </div>
                <div ng-show="hasError(profile_form.facebook)" ng-messages="profile_form.facebook.$error" class="help-block">
                    <div ng-message="url"> Invalid Address</div>
                    <div ng-message="required"> Campo obrigatório</div>
                </div>
            </div>

<social-network ng-model="share" color="#3b5998" icon="facebook"
                                placeholder="Ex: https://www.facebook.com/empresa"
                                component="profile_form.facebook"/>

angular.module("app").directive("socialNetwork", function () {
    return {
        templateUrl: "templates/socialNetwork.html",
        replace: true,
        restrict: "E",
        transclude: true,
        require: ['^?validateUrl', '^?ngMessages', 'ngModel'],
        scope: {
            'ngMessages': '=',
            'ngModel': '=',
            'icon': '@',
            'color': '@',
            'placeholder': '@',
            'component': '@'
        },
        link: function($scope, $element, $attrs, ngModel){
            $scope.hasError = function (field, arg2, arg3) {
                if (field) {
                    console.log(field.$name);
                }
            }
        }
    };
});

<div class="input-group" ng-class="{'has-error': hasError({{component}})}">
    <span class="input-group-addon">
        <i class="fa fa-{{icon}} fa-input-group" ng-style="{color: '{{color}}'}"></i>
    </span>
    <input class="form-control" type="url" ng-model="ngModel[icon].url" placeholder="{{placeholder}}" name="{{icon}}" required validate-url>
    <span class="input-group-addon">
        <input type="checkbox" ng-model="ngModel[icon].show">
    </span>
</div>
<div ng-show="hasError({{component}})" ng-messages="component.$error" class="help-block">
    <div ng-message="url"> Endereço inválido</div>
    <div ng-message="required"> Campo obrigatório</div>
</div>