Angular Directive DOM manipulation behavior

I'm having some unexpected behavior with DOM manipulation in a directive. I have two icons and would like icons, a phone and email and would like to show their contents when hovered over. Which should be simple enough but I'm having trouble traversing the DOM to reach the child elements.

Here's my Directive:

app.directive('contact', function () {
return {
    restrict: 'E',
    scope: {
      email:'@',
      phone: '@',
      extension: '@'
    },
    link: function (scope, element, attrs) {
        var el = element;
        var kids = $(el).children();
        var emailChild = $(kids[0]);
        var email = emailChild.context.children[0];

        element.children().bind('mouseenter', function() {
                console.log(this);
                console.log(emailChild.context.children[0]);
                console.log(email);
            });
    },


    template: '<div class="contact_methods">' +
              '<div ng-if="email" class="email" href="#">' +
              '<div class="contact_info_email more_info" style="display:none;"><a ng-href="mailto:{{email}}">{{email}}</a></div>' +
              '</div>&nbsp;&nbsp;' +
              '<div ng-if="phone" class="phone" href="#"> ' +
              '<div class="contact_info_phone more_info">{{phone}} ext.{{extension}}</div>' +
              '</div>' +
              '</div>'


}

});

Here is the unexpected behavior:

console.log(this);
console.log(emailChild.context.children[0]);
console.log(email);

These evaluate to:

 <div class=​"contact_methods">​…​</div>​
 <div ng-if=​"email" class=​"email ng-scope" href=​"#">​…​</div>​
 undefined

email outputs undefined; however, it's contents are the line above it? Also I am unable to drill down into it like element.children().children()? The hover stops working.