Using controller-scoped data in a directive's jqlite-generated html

This question is similiar to them one asked in Mike's post Using ng-model within a directive.

I am writing a page which is small spreadsheet that displays calculated output based on user input fields. Using a directive, I'm making custom tags like this:

<wbcalc item="var1" title="Variable 1" type="input"></wbcalc>
<wbcalc item="var2" title="Variable 2" type="input"></wbcalc>
<wbcalc item="calc" title="Calculation" type="calc"></wbcalc>

The 'item' field references scoped data in my controller:

$scope.var1 = '5';  // pre-entered input
$scope.var2 = '10'; // pre-entered input
$scope.calc = function() {
    return parseInt($scope.var1) + parseInt($scope.var2);
};

And the 'type' field is used in the directive's logic to know whether to treat the item as a string or a function.

Here's a fiddle for this: http://jsfiddle.net/gregsandell/PTkms/3/ I can get the output elements to work with the astonishing line of code:

html.append(angular.element("<span>")
    .html(scope.$eval(attrs.item + "()"))
);

...and I'm using this to get my inputs connected to my scoped controller data (I got this from Mike's post:

var input = angular.element("<input>").attr("ng-model", attrs.item);
$compile(input)(scope);
html.append(input);

...while it does put the values in the fields, they aren't bound to the calculation, as you can see by changing inputs in my fiddle.

Is there a better and/or more intuitive way to link my controller-scoped data to the jqlite-generated html in my directive?

Take a look at this, I think you can simplify the process a fair bit.

http://jsfiddle.net/PTkms/4/

angular.module('calculator', []).directive('wbcalc', function($compile) {
    return {
        restrict: 'E',
        template: '<div><div class="span2">{{title}}</div><input ng-model="item"></div>',
        scope: {
            title: '@',
            item: '='
        },
        link: function(scope, element, attrs) {
            // Don't need to do this.
        }
    }
});
function calcCtrl($scope) {
    $scope.var1 = '5';
    $scope.var2 = '10';

    $scope.calc = function() {
        // Yes, this is a very simple calculation which could
        // have been handled in the html with {{0 + var1 + var2}}.
        // But in the real app the calculations will be more
        // complicated formulae that don't belong in the html.
        return parseInt($scope.var1) + parseInt($scope.var2);
    };
}

I know you said you like jQuery - but to make best use of Angular you need to think in an Angular way - use bindings, don't manipulate the DOM directly etc.

For this example, it would be helpful to read up on the isolated scope bindings used - '@' and '=', see:

http://docs.angularjs.org/guide/directive