Access $scope variable inside directive template and update controller $scope.variable

Question

I have create a simple directive with an input element and span. Using the directive I created two custom elements with isolate scope. Now, I am trying to get the sum of the data entered in the input element of the directive. But really can't figure out how to do that. Here is the my controller and directive :

angular.module('mapp',[])

.controller('ctrl',['$scope',function($scope){
    $scope.total = 0;  
}])

.directive('customElement',function(){
    return {
        restrict: 'E',
        scope:{
            data: '=info'
        },
        template: '<input type="text" ng-model="data1">\
                    <span>{{data1}}</span>'
    }
});

I'm looking to sum up data1 of all directives elements and update $scope.total. Here is the HTML code:

<div ng-app="mapp">
    <div ng-controller="ctrl">

        <custom-element info="a"></custom-element>
        <custom-element info="b"></custom-element>
        <br/>
        <br/> Total: <span>{{total}}</span>
    </div>
</div>

Here is a DEMO

Answer 1

Here is a working fiddle

angular.module('mapp', [])

    .controller('ctrl', ['$scope', function ($scope) {
    $scope.total = 0;
    $scope.a = 0;
    $scope.b = 0;
    $scope.$watchCollection('[a,b]', function () {
        console.log('watch');
        $scope.total = $scope.a + $scope.b;
    });
}])

    .directive('customElement', function () {
    return {
        restrict: 'E',
        scope: {
            data: '=info'
        },
        template: '<input type="number" ng-model="data">\
                    <span>{{data}}</span>'
    }
});

A version without $watch

A version with ng-repeat