Predefine error message with angular validation custom directive - angularjs

Question

I am doing angular validation as follows:
<form name="form" ng-submit="vm.create(vm.job)" validation="vm.errors">
<input name="vm.job.position" type="text" ng-model="vm.job.position" validator />
When the form is submitted the directive gets the name of the property, e.g. position, from the ng-model. It then checks if vm.errors has a message for that property. If yes then adds a span with the error message after the input.
However, I would also like to use the same directive in another way:
<form name="form" ng-submit="vm.create(vm.job)" validation="vm.errors">
<input name="vm.job.position" type="text" ng-model="vm.job.position" />
<span class="error" validator="position"></span>
In this case I removed the validator from the input and added the span already allowing me to control where the error will be displayed. In this case I am using validator="position" to define to which model property the error message is associated.
I am not sure how should I add this functionality to my current code ... Any help is appreciated.
The following is all the code I have on my directives:
(function () {
"use strict";
angular.module("app").directive("validation", validation);
function validation() {
var validation = {
controller: ["$scope", controller],
replace: false,
restrict: "A",
scope: {
validation: "="
}
};
return validation;
function controller($scope) {
var vm = this;
$scope.$watch(function () {
return $scope.validation;
}, function () {
vm.errors = $scope.validation;
})
}
}
angular.module("app").directive("validator", validator);
function validator() {
var validator = {
link: link,
replace: false,
require: "^validation",
restrict: "A"
};
return validator;
function link(scope, element, attributes, controller) {
scope.$watch(function () {
return controller.errors;
}, function () {
if (controller.errors) {
var result = controller.errors.filter(function (error) {
if (error.flag == null)
return false;
var position = attributes.name.lastIndexOf(".");
if (position > -1)
return attributes.name.slice(position + 1).toLowerCase() === error.flag.toLowerCase();
else
return attributes.name.toLowerCase() === error.flag.toLowerCase();
});
if (result.length > 0) {
var error = element.siblings("span.error").first();
if (error.length == 0)
element.parent().append("<span class='error'>" + result[0].info + "</span>");
else
error.text(result[0].info);
} else {
element.siblings("span.error").first().remove();
}
}
}, true);
}
}
})();