AngularJs Directive: Using TemplateURL. Replace element. Add form input. Getting form.input.$error object

Not sure if this is possible but I'm trying, and keep coming up short.

http://plnkr.co/edit/Gcvm0X?p=info

I want a 'E' (element) directive that is replaced with a more complex nested HTML node using the 'templateUrl' feature of directives.

HTML defining the directive (form tag included for complete mental image):

<form id="frm" name="frm">

      <ds-frm-input-container
        class="col-md-1"
        frm-Name="frm"
        frm-obj="frm"
        input-name="txtFName"
        ds-model="user.firstName"></ds-frm-input-container>  

</form>

TemplateUrl contents which 'replaces' the above directive 'ds-frm-input-container' HTML element:

<div>

  <input
    required
    ng-minlength=0
    ng-maxlength=50
    class="form-control"
    ng-model="dsModel" 
    placeholder="{{dsPlaceHolder}}" />  

  <span ng-if="showErrs" class="label label-danger">FFFFF: {{dsModel}}</span>

</div>

Controller and Directive:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = "Nacho";
  $scope.user = {};
  $scope.user.firstName = ""; 


})
.directive('dsFrmInputContainer', function(){

    var ddo = { 
      priority: 0,
      restrict: 'AE',
      scope: 
      {
        frmName: '@',
        inputName: '@',
        dsPlaceHolder: '@',
        dsModel: '=',
        frmObj: '='
      },
      templateUrl: 'template1.html',
      replace: true,
      controller: function($scope)
      {
        $scope.showErrs = true;

      },
      compile: function compile(ele, attr) {
        return {
          pre: function preLink(scope, ele, attr, controller) 
          { 

          },
          post: function postLink(scope, ele, attr, controller) 
          { 
            var txt = ele.find('input');

            txt.attr('id', scope.inputName);
            txt.attr('name', scope.inputName);

            //BLUR
            txt.bind('blur', function () {

              console.log("BLUR BLUR BLUR");

              angular.forEach(scope.frmObj.$error, function(value, key){
                  var type = scope.frmObj.$error[key];

                  for(var x=0; x < type.length; x++){
                    console.log(type[x]);
                  }
              });        

              event.stopPropagation();
              event.preventDefault();

            });              
          }
        };
      },

    };  

    return ddo;

});

The directive replaces just fine and the input element is named just fine. The form object however doesn't include the input element name in the error information. This makes it impossible for me to single out the input element during a 'blur' event that is setup in the directive.

I am doing this trying to reduce the show/hide logic 'noise' in the html for error messages (spans) and it should be reusable.

UPDATE (2014.01.28):

2014.01.28: Added promises. There is a service that allows validation on button clicks. NOT USING built in angular validation anymore found some compatibility issues with another library (or viceversa).

ORIGINAL: Here is my form validation directive vision completed (plnkr link below). Completed in concert with the help of the stack overflow community. It may not be perfect but neither are butterfingers but they taste good.

http://plnkr.co/edit/bek8WR?p=info